0

我正在尝试使用 ajax 提交表单，但我正在提交，当我单击提交按钮时，它不是使用 ajax 提交，而是使用表单方法提交。请让我知道我在哪里弄错了。

这是我的 Ajax 表单数据：

 <script>
  $("#query_form").submit(function(event) {
    event.preventDefault();
      //alert('dd');
      var forData = $('form#query_form').serialize();
      var url = $('form#query_form').prop('action');
      $.ajax({
        url: url,
        data:forData,
        type: "POST",
        dataType: 'JSON',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success: function( response ) {
          alert('dd');
          $('#send_form').html('Submit');
          $('#res_message').show();
          $('#res_message').html(response.msg);
          $('#msg_div').removeClass('d-none');

          document.getElementById("query_form").reset(); 
          setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
          },10000);
        }
      });
    });

这是表单视图数据...

<form name="callback" id="query_form" method="post" action="{{url('/postEmail')}}">
                    @csrf
                    <div class="form-section3 left"><i class="fa fa-user-o" aria-hidden="true" style="font-size: 18px; color: #fff;"></i>
          <input name="user_name" type="text" placeholder="Your Name" class="inputxt" required="">
        </div>
        <div class="form-section3 left"><i class="fa fa-mobile" aria-hidden="true" style="font-size: 22px; color: #fff;"></i>
          <input name="user_phone" type="number" pattern="[789][0-9]{9}" placeholder="Mobile No" class="inputxt" required="">
        </div>
        <div class="form-section3 left"><i class="fa fa-at" aria-hidden="true" style="font-size: 22px; color: #fff;"></i>
          <input name="user_email" type="email" class="inputxt" placeholder="Email ID" required="">
          <input name="project" id="project" type="hidden" value="Aipl Joy Square">
        </div>
        <div class="alert alert-success d-none" id="msg_div">
          <span id="res_message"></span>
        </div>
        <div class="form-section3 left">
          <input type="submit" value="Submit" id="send_form" name="send" class="btn-submit">
        </div>
      </form>
4

1 回答 1

0

脚本是在页面末尾还是开头？

我在问，因为如果它在开始时，那么$("#query_form").submit侦听器是在加载 DOM 之前设置的，因此看不到#query_form元素。

我建议您使用较新的语法$('form').on('submit', function(e){或将您的 js 代码包围$(document).ready(function() {或两者兼而有之。

于 2019-12-25T19:18:34.660 回答