Как отправить форму с помощью Ajax в Laravel6?

Question

Я пытаюсь отправить форму с помощью 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>

Answer 1

Сценарий находится в конце страницы или в начале?

Я спрашиваю, потому что если это в начале, то $("#query_form").submit слушатель устанавливается до загрузки DOM и, следовательно, не видит #query_form элемент.

Я предлагаю вам использовать новый синтаксис $('form').on('submit', function(e){ или окружите свой js-код $(document).ready(function() { или оба.