jQuery Girl
  1. jQuery Girl
  3. Empêcher la soumission de formulaires doubles dans jQuery
Intereting Posts
Changer la couleur du texte dans contenteditable div jQuery vérifie si le texte dans l’élément de liste correspond à la classe d’un div Bootstrap .popover () ‘show’ & ‘destroy’ ne fonctionnent pas correctement Array find, nativement ou via jQuery? Info-bulle pour le contenu HTML ruby on rails jquery n’appelle pas la bonne action du contrôleur Extension de jQuery Carte Google dans le coin supérieur gauche définir le contenu de la taille éditable div basé sur le texte à l’intérieur de cette jquery défile jusqu’à une position spécifique en cas d’erreur et de focus Comment envoyer un tweet sur Twitter avec jquery dans mon site Comment supprimer l’élément d’entrée avant mon bouton? Je peux append une superposition, mais je ne peux pas l’enlever (jQuery) Redéfinition des fonctions jQuery – Meilleures pratiques OAuth, PHP, Rest API et curl donnent 400 requêtes incorrectes

Empêcher la soumission de formulaires doubles dans jQuery

J’ai un formulaire que les utilisateurs utilisent pour entrer des informations sur une publication. Une fois terminé, ils cliquent sur «Enregistrer» pour mettre à jour. Toutefois, dans de rares cas (10 enregistrements sur 15 000), l’utilisateur a double-cliqué sur le bouton d’enregistrement, ce qui a provoqué la duplication de deux éléments dans l’envoi du formulaire.

J’ai essayé d’utiliser ceci pour l’empêcher: 

$('input[type=submit]').click(function(){ $('input[type=submit]').attr('disabled',true); //return true; });

Mais le problème avec cela, cela fonctionne parfaitement dans Safari / Firefox, etc., mais ne fonctionne pas dans Internet Explorer 8 (et probablement pas pour 6 & 7)

Lorsque j’appuie sur Enregistrer dans IE8, le bouton est désactivé et c’est tout, aucune soumission de formulaire.

(Je l’ai essayé avec et sans retour vrai;)

Je ne suis pas sûr que ce soit une supposition complète, mais cela dépend peut-être de votre sélecteur. Essayez plutôt: 

 $('input:submit').click(function() { $(this).attr('disabled', true); });#

Vous pouvez également essayer d’intercepter l’ submit event lui-même: 

 $('form').bind('submit', function(e) { $(this).find('input:submit').attr('disabled', 'disabled'); });

Vous devez gérer l’événement onsubmit du formulaire plutôt que l’événement click du bouton d’envoi.

L’utilisateur peut également appuyer sur Entrée pour soumettre le formulaire. Par conséquent, au lieu de lier l’événement click de bouton, utilisez le formulaire d’envoi. De plus, au lieu de désactiver, masquez le bouton d’envoi en le remplaçant par une image de chargement. 

 jQuery("form").submit(function () { jQuery(":submit", this).css("display", "none"); jQuery(":submit", this).after(""); });

Chirs, c’est un problème très courant auquel tous les développeurs Web sont confrontés. Et devinez quoi, il a une solution très bien acceptée.

La solution s’appelle PRG (Post -> Redirect -> Get). Plus d’informations à ce sujet sur http://en.wikipedia.org/wiki/Post/Redirect/Get

En gros, vous devez laisser la page en mode HTTP GET afin que, même si l’utilisateur actualise la page, aucune donnée ne soit soumise à nouveau. Donc, vous soumettez le formulaire, redirigez la page vers une URL qui affiche les données récemment soumises en effectuant une demande GET.

EDIT Selon le commentaire ci-dessous, Chris semble déjà suivre le paradigme ci-dessus. Génial. Mais il voit toujours des soumissions en double. Je suggèrerais, lors de la première soumission, de remplacer le bouton par une image de chargement (en premier lieu) afin que l’utilisateur ne voie aucun bouton sur lequel cliquer à nouveau 🙂 

 $(document).ready(function() { // function which handles form submission $(#submitButton).replaceWith("