jQuery Girl
  1. jQuery Girl
  3. Comment empêcher le rechargement d’une page après la soumission du formulaire – JQuery
Intereting Posts
Précharger les images de marqueur pour Google Maps jquery filter image problèmes de src Jquery Mobile – Puis-je l’utiliser avec une mise en page existante? Problèmes avec la manipulation des tableaux obtenus de php en utilisant jquery ajax pourquoi $ .isEmptyObject ($ (‘# id-n’existe-pas-sur-page’)) renvoie false? lire html / text depuis une autre page html en utilisant jquery Dans JQuery ajax, comment gérer correctement une erreur HTTP 408? MVC 3 Ajax.ActionLink avec la boîte de dialog de confirmation de l’interface utilisateur JQuery Effacer la valeur du champ de texte dans l’object clone FullCalendar – N’affiche que la case “tous les jours” en mode agenda (hebdomadaire ou quotidien) Utiliser jQuery selector et setSelectionRange n’est pas une fonction Trois sections à redimensionner avec le navigateur Format Highcharts xAxis pour les données boursières FullCalendar: Détecte si le redimensionnement était au début ou à la fin. jQuery show / hide / toggle fonctionne, mais ne rest pas comme il se doit – il revient à l’état d’origine

Comment empêcher le rechargement d’une page après la soumission du formulaire – JQuery

Je travaille sur un site Web pour ma classe de développement d’applications et j’ai le problème le plus étrange.

J’utilise un peu de JQuery pour envoyer des données de formulaire à une page php appelée ‘process.php, puis le télécharger sur ma firebase database. Le bogue étrange est que la page est rechargée lors de la soumission du formulaire, et je ne peux pas ou la vie de moi-même trouver comment faire en sorte que JQuery continue en arrière-plan. C’est en quelque sorte le point d’utiliser JQuery en premier lieu, haha. Quoi qu’il en soit, je vais soumettre tous les codes pertinents, laissez-moi savoir si vous avez besoin de quelque chose d’autre. 

 $(document).ready(function () { $('#button').click(function () { var name = $("#name").val(); var email = $("#email").val(); $.post("process.php", { name: name, email: email }).complete(function() { console.log("Success"); }); }); });  
 
Join our mailing list!

Ceci est mon php si son pertinent: 

 query($save1); if (!$success) { die("Couldn't enter data: ".$mysqli->error); echo "unsuccessfully"; } echo "successfully"; ?>

Ceci est une capture d’écran du journal:

capture d'écran du journal

L’élément , lorsqu’il est placé dans un formulaire, le soumettra automatiquement, sauf indication contraire. Vous pouvez utiliser les 2 stratégies suivantes:

  1. Utilisez pour remplacer le comportement de soumission par défaut
  2. Utilisez event.preventDefault() dans l’événement onSubmit pour empêcher la soumission du formulaire.

Solution 1:

  • Avantage: simple changement de balisage
  • Inconvénient: subvertit le comportement de formulaire par défaut, en particulier lorsque JS est désactivé. Que se passe-t-il si l’utilisateur veut cliquer sur “entrer” pour le soumettre?

Insérez un atsortingbut de type supplémentaire dans votre balise de bouton:

Solution 2:

  • Avantage: le formulaire fonctionnera même si JS est désactivé et respecte le formulaire standard UI / UX, de sorte qu’au moins un bouton est utilisé pour la soumission.

Empêcher la soumission du formulaire par défaut lorsque vous cliquez sur le bouton. Notez que ce n’est pas la solution idéale, car vous devriez en fait écouter l’événement submit et non l’événement click du bouton : 

 $(document).ready(function () { // Listen to click event on the submit button $('#button').click(function (e) { e.preventDefault(); var name = $("#name").val(); var email = $("#email").val(); $.post("process.php", { name: name, email: email }).complete(function() { console.log("Success"); }); }); });

Meilleure variante:

Dans cette amélioration, nous écoutons l’événement submit émis par l’élément

: 

 $(document).ready(function () { // Listen to submit event on the 
 itself! $('#main').submit(function (e) { e.preventDefault(); var name = $("#name").val(); var email = $("#email").val(); $.post("process.php", { name: name, email: email }).complete(function() { console.log("Success"); }); }); });

Encore meilleure variante: utilisez .serialize() pour sérialiser votre formulaire, mais n’oubliez pas d’append des atsortingbuts de name à votre entrée:

L’atsortingbut name est requirejs pour que .serialize() fonctionne, comme indiqué dans la documentation de jQuery :

Pour que la valeur d’un élément de formulaire soit incluse dans la chaîne sérialisée, l’élément doit avoir un atsortingbut name.

Et ensuite dans votre JS: 

 $(document).ready(function () { // Listen to submit event on the 
 itself! $('#main').submit(function (e) { // Prevent form submission which refreshes page e.preventDefault(); // Serialize data var formData = $(this).serialize(); // Make AJAX request $.post("process.php", formData).complete(function() { console.log("Success"); }); }); });