Проблемы с отправкой формы JQuery

Question

Я в недоумении из-за простого jQuery. У меня есть следующий код в отдельном файле:

 $(document).ready(function(){
    //$("#trackit").click(function() {  

    $.ajax({
       type: "POST",
       url: 'include/trackit.php',
       data: "trackingNum=123456",
       success: function(data) {
         alert(data);
       }
    });

   //});  
});

Это прекрасно работает, при загрузке страницы возвращает ожидаемые данные в окно предупреждения.

Но, если я удалю комментарии из этой строки:

$("#trackit").click(function() { 

чтобы получить кнопку отправки формы, я не получаю никаких данных.

Вот сокращенная информация о форме:

<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" name="tForm" id="tForm" method="post">

    <button type="submit" class="buttonTracking" id="trackit" name="trackit">Track It!</button>

</form>

Я только что пропустил простую ошибку здесь?

Answer 1

Правильный рабочий код будет таким:

 $(document).ready(function(){
    $("#trackit").click(function() {  

    $.ajax({
       type: "POST",
       url: 'include/trackit.php',
       data: "trackingNum=123456",
       success: function(data) {
         alert(data);
       }
    });
    return false; // to cancel form submission and subsequent page refresh
   });  
});

Answer 2

Я бы сказал, что это потому, что кнопка #trackit также является кнопкой отправки.Действие клика - выполнение вашего JavaScript и отправка формы.Вам необходимо изменить код на:

$(document).ready(function(){
  $("#trackit").click(function() {  

  $.ajax({
    type: "POST",
    url: 'include/trackit.php',
    data: "trackingNum=123456",
    success: function(data) {
      alert(data);
    }
  });
  return false;
 });  
});