【问题标题】:After form submit, scroll to form表单提交后,滚动到表单
【发布时间】:2014-10-12 18:22:24
【问题描述】:

如果这是重复的,我很抱歉(我到处搜索可能的解决方案),但我只需要知道在 Laravel 中提交表单后如何使用 jquery 代码。

仅供参考:我正在使用 Laravel,当表单凭据正确时,我使用 Redirect::back()。

这是我提交表单时使用的控制器代码:

public function store()
    {
        $user = array(
            'voornaam'          => Input::get('voornaam'),
            'achternaam'        => Input::get('achternaam'),
            'email'             => Input::get('email'),
            'telefoonnummer'    => Input::get('telefoonnummer'),
            'bedrijfsnaam'      => Input::get('bedrijfsnaam'),
            'adres'             => Input::get('adres'),
            'opmerking'         => Input::get('opmerking'), 
            'titel'             => Input::get('paginanaam'),
            'datum'             => Input::get('dedatum'),
            'personen'          => Input::get('personen'),
        );
        $data = $user;

        $rules = array(
            'voornaam'      => 'required',
            'achternaam'    => 'required',
            'email'         => 'required',
            'adres'         => 'required',
            'bedrijfsnaam'  => 'required',
            'datum'         => 'required',
        );

        $messages = array(
            'voornaam.required'     => 'Vul a.u.b. uw voornaam in.',
            'achternaam.required'   => 'Vul a.u.b. uw achternaam in.',
            'email.required'        => 'Vul a.u.b. uw emailadres in.',
            'adres.required'        => 'Vul a.u.b. uw factuuradres in.',
            'bedrijfsnaam.required' => 'Vul a.u.b. uw bedrijfsnaam in.',
            'datum.required'        => 'Selecteer a.u.b. een datum.',
        );

        if(Input::get('spamcheck'))
        {
            return 'Stop spamming please.';
        }

        $validation = Validator::make($data, $rules, $messages);
        if ( $validation->fails() )
        {
            return Redirect::back()->withErrors($validation)->withInput();
        } else {
            if(Input::get('kopie') === 'ja') {
                Mail::send();

            } else {
                Mail::sendothermail();
            }

        return Redirect::back();
    }
}

我从这个控制器中删除了一些不必要的代码 (fyi),这样你就不会因为我的问题而分心。当用户提交表单并出现错误时,错误会显示在页面顶部。但是,我想做类似的事情:当用户提交表单并且凭据正常时,它会重新加载页面并应该滚动到表单并隐藏表单并显示成功消息而不是表单。

如果这是一个类似问题的重复,请告诉我。

【问题讨论】:

  • 你是用ajax提交表单吗?
  • 不只是普通的 php。 (在 Laravel 中)
  • 所以我想有两种方法可以解决这个问题:1)重定向到页面并使用哈希片段将页面移动到正确的位置,或者 2)在会话中添加一些内容来说明表单已正确提交,然后在您的视图中检查会话变量并根据该变量做任何您想做的事情(注入一些使用 window.scrollTo() 的 JS,显示一条消息等)
  • 实际上我所说的#1 基本上是@Thisis 的答案——基本上不是使用Redirect::back(),而是使用另一种重定向方法到一个已知的URL。例如,如果您使用命名路由:Redirect::to(URL::route('my.route').'#form')
  • 哈,我所说的#2 几乎是@Brian 的回答:)

标签: php jquery forms laravel


【解决方案1】:

验证成功后返回您的视图,并使用会话闪存数据执行if success load js

控制器

return Redirect::back()->with('success');

查看 - demo

@if(Session::get('success'))

    <script>

         $('html, body').animate({
            scrollTop: $("#form").offset().top
         }, 2000);

         window.setTimeout(function(){
             $('#form').hide().next('#success').show();
         }, 1500);

    </script>

@endif

【讨论】:

  • 努力完成这项工作!对于我能读到的东西,这就是我正在寻找的东西。如果成功,我会发布;)现在谢谢!
  • 我在控制台中收到“TypeError: $(...).offset(...) is undefined scrollTop: $("#aanmelden").offset().top”记录。
  • 这可能是因为选择器错误或#aanmelden 未显示。
  • 确保包含表单(或表单本身)的 div 的 id 为 form,并确保您使用的是 jQuery。
  • 当然,我的错!忘记提交后页面重新加载了,所以加了$(document).ready
【解决方案2】:

给包含表单+错误或成功消息的元素一个“名称”属性,比如“表单”。然后,不要使用 Redirect:back(),而是重定向到后面有 #form 的页面,例如 'index.php#form'。 JavaScript 会提供更多选择。

【讨论】:

  • 我不知道你是否熟悉 Laravel,但重定向不是用 index.php 等完成的。它是用路由等完成的。但无论如何,当我这样做时,它什么也没做。它不会提交,我可以点击所有我想要的。或者我做错了什么,你能举个例子吗?
猜你喜欢
  • 1970-01-01
  • 2020-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多