繁体   English   中英

提交表单后,滚动到表单

[英]After form submit, scroll to form

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

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

这是提交表单时使用的我的Controller代码:

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)删除了一些不必要的代码,因此您不会因我的问题而分心。 当用户提交表单并且有错误时,错误将显示在页面顶部。 但是,我想做些类似的事情:当用户提交表单并且凭据确定时,它将重新加载页面,并应滚动到该表单并隐藏该表单,并显示成功消息而不是表单。

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

验证成功后,返回包含会话闪存数据的视图以执行if success load js

调节器

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

查看 - 演示

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

    <script>

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

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

    </script>

@endif

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM