Question

我已经创建了一个联系表单，我希望我的页面向下滚动以显示我的功能。

我的getContactUsForm函数

public function getContactUsForm(){

    $menus_child = Menu::where('menu_id', 0)->with('menusP')->get();
    $menu = Menu::where('id', 1)->orWhere('title', 'home')->firstOrFail(); // 30 is the home id
    $layout = $menu->type;

    $content = Content::where('id', 1)->orWhere('title', 'home')->firstOrFail();

    $main_menu = Menu::all();
    $contact_bottom = Contact::all();
    $social_media = SocialMedia::all();
    $seo = Seo::all();


    //Get all the data and store it inside Store Variable
    $data = Input::all();

    //Validation rules
    $rules = array (
        'name' => 'required|alpha',
        'email' => 'required|email',
        'message' => 'required'
    );

    //Validate data
    $validator = Validator::make ($data, $rules);

    //If everything is correct than run passes.
    if ($validator -> passes()){

        //Send email using Laravel send function
        Mail::send('templates::emails.contact', $data, function($message) use ($data)
        {
        //email 'From' field: Get users email add and name
        $message->from($data['email'] , $data['name']);
        //email 'To' field: cahnge this to emails that you want to be notified.
        $message->to('info@webkrunch.co.za', 'Webkrunch Info')->subject('contact request');

        });
        return response()->json('Thank you! Your message has been received');
    }else{
        //return contact form with errors
        return view('open::index', compact('menus_child', 'main_menu', 'content', 'contact_bottom', 'social_media', 'seo'))->with('menu', $menu, $main_menu, $content, $contact_bottom, $social_media)->withErrors($validator);
    }
}

我已经用成功消息重新定向了。

我的js

$('#contact_form').submit(function(){
  var name = $('#name').val();
  var email = $('#email').val();
  var subject = $('#subject').val();
  var your_message = $('#your_message').val();

  $.ajax({
      type: "POST",
      url: host+'/',
      data: {name:name, email:email, subject:subject, your_message:your_message},
      success: function( msg ) {
      // alert( msg );
        $('html, body').stop().animate({
          scrollTop: $("#contact").offset().top
        }, 600);
      }
  });
});

但是在提交页面后我的js不起作用。

Answer 1

问题在于：

您正在捕获submit功能。但这并不意味着什么，因为你并没有阻止表单的默认操作，即POST到服务器。这将忽略您的提交功能。
当您redirect()->back()->with('success')时，您没有做任何事情。它只是回去了。 submit()方法不会再次神奇地开火。

以下是您的选择：

您可以使用AJAX执行提交。如果一切顺利，你可以回复一个有利的结果。 return response()->json('Thank you! Your message has been received')。
如果您对AJAX不感兴趣，那么您可以检查是否存在$success变量并将该javascript包装在该检查周围。

这样的事情：

@if(isset($success))
    <script>
    $('#contact_form').submit(function(){
        $('html, body').stop().animate({
            scrollTop: $("#contact").offset().top
        }, 600);
    });
    </script>
@endif

然后将其放在视图的底部。

修改

如果您想要使用method 1下列出的Here's your options，那么您需要使用AJAX并阻止默认表单提交：

$('#contact_form').on('submit', function(){ var $form = $(this); $.ajax({ url: $form.prop('action'), method: $form.prop('method'), data: $form.serialize(), dataType: 'json' }).done(function(resp){ $('html', 'body').stop().animate({ scrollTop: $('#contact').offset().top }, 600); //you can access your message in the resp object. }); return false; });

提交后让laravel向下滚动

1 个答案: