Problème avec le formulaire jQuery soumettre

Question

Je suis à une perte ici avec un simple jQuery. Je le code suivant dans un fichier séparé:

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

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

    //}); 
}); 

Cela fonctionne très bien, à la page charge, il renvoie les données attendues à la fenêtre d'alerte.

Mais, si je retire les commentaires de cette ligne:

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

pour capturer le bouton soumettre, je reçois pas de données de retour du formulaire.

Voici la forme abrégée info:

<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> 

Suis-je juste une simple erreur donnant ici?

Answer 1

bon code de travail serait:

$(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

Je dirais que c'est parce que le bouton #trackit est également un bouton d'envoi. L'action de clic exécute votre javascript ET soumet le formulaire. Vous devez changer le code pour:

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

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