Проблема с формой jQuery submit

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> 

Am Я просто с видом на некоторую простую ошибку здесь?

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 также кнопка отправить. Действие click выполняет ваш javascript и отправляет форму. Вам нужно изменить этот код на:

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

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