D'éviter la double soumission de formulaires en jQuery
J'ai un formulaire qui prend un peu de temps pour le serveur. J'ai besoin de s'assurer que l'utilisateur attend et ne pas tenter de soumettre à nouveau le formulaire en cliquant sur le bouton nouveau. J'ai essayé d'utiliser la suite de jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("form#my_form").submit(function() {
$('input').attr('disabled', 'disabled');
$('a').attr('disabled', 'disabled');
return true;
});
});
</script>
Quand je l'ai essayer dans Firefox tout est désactivé, mais le formulaire n'est pas soumis à l'une des POST données, il est censé inclure. Je ne peux pas utiliser jQuery pour soumettre le formulaire parce que j'ai besoin le bouton pour être soumis avec le formulaire comme il y a plusieurs boutons de soumission et je déterminer qui a été utilisée par lequel la valeur est incluse dans le POSTE. J'ai besoin de le former à être présenté comme d'habitude et j'ai besoin de désactiver tout juste après qui se passe.
Merci!
- Merci à tous pour votre aide!
- double possible de la Désactivation des liens vers d'arrêt double-clique dans JQuery
Vous devez vous connecter pour publier un commentaire.
Mise à jour en 2018: je viens de recevoir des points pour cette vieille réponse, et je voulais juste ajouter que le meilleur solution serait de faire l'opération idempotent de sorte que les doublons sont inoffensifs.
Par exemple, si le formulaire crée un ordre, mettre un ID unique dans le formulaire. La première fois que le serveur voit une commande de demande de création d'id, il doit créer et répondre "succès". Les demandes devront également répondre de "succès" (dans le cas où le client n'obtient pas la première réponse), mais ne devrait pas changer quoi que ce soit.
Les doublons doivent être détectés via un contrôle d'unicité dans la base de données pour éviter des conditions de course.
Je pense que votre problème vient de cette ligne:
Vous êtes à la désactivation de TOUTES les entrées, y compris, je suppose, ceux dont les données du formulaire est censé présenter.
Pour désactiver le bouton submit(s), vous pourrait ce faire:
Cependant, je ne pense pas que IE ne soumettez le formulaire, même si ces boutons sont désactivés. Je vous suggère une approche différente.
Un plugin jQuery pour résoudre
Nous vient de résoudre ce problème avec le code suivant. L'astuce ici est d'utiliser du jQuery
data()
pour marquer le formulaire comme déjà soumis ou non. De cette façon, nous n'avons pas à jouer avec les boutons de soumission, qui freaks IE out.L'utiliser comme ceci:
Si il y a AJAX formes que devrait être autorisés à présenter plusieurs fois par chargement de la page, vous pouvez leur donner une classe en indiquant que, ensuite, de les exclure de votre sélection comme ceci:
$(this)
à unvar that = $(this)
?$form
si - la "forme", car il est plus descriptive, et le premier$
parce que par ma convention, cela signifie qu'il est un objet jQuery.return this
pour permettre le chaînage des appels sur le sélecteur, comme$('form.someclass').preventDoubleSubmission().doSomethingElse();
$(':reset,:submit', $form).prop('disabled',true)
pour un rapide feedback de l'utilisateur.$('#awardForm').ajaxForm(function(responseText) { $('#awardForm').parent().html(responseText); });
j'ai fait et maintenant, je ne suis pas en mesure de reproduire la double entrée d'enregistrement. Je note qu'il a toujours été juste 2 enregistrements, jamais plus de 3 ou 4, etc. Mais je devais être rapide à obtenir, même 2. Avec les lignes ci-dessus prises, il est travaillé jusqu'à présent! 🙂$form.data('submitted', false);
.Timing approche est erronée - comment savez-vous combien de temps l'action aura sur le navigateur du client?
Comment le faire
Lorsque le formulaire est soumis, il va désactiver tous les boutons de soumission à l'intérieur.
Rappelez-vous, dans Firefox, quand vous désactivez un bouton de cet état va se rappeler quand vous allez rentrer dans l'histoire. Pour éviter que vous devez activer les boutons sur le chargement de la page, par exemple.
Je pense que Nathan Long de la réponse est le chemin à parcourir. Pour moi, je suis en utilisant la validation côté client, donc j'ai juste ajouté une condition que le formulaire soit valide.
MODIFIER: Si ce n'est pas ajoutée, l'utilisateur ne sera jamais en mesure de soumettre le formulaire, si la validation côté client rencontre une erreur.
event.timeStamp
ne fonctionne pas dans Firefox. Retourner false est non standard, vous devez appelerevent.preventDefault()
. Et pendant que nous y sommes, toujours utiliser des accolades à un contrôle de construire.À la somme de toutes les réponses précédentes, voici un plugin qui fait le travail et les œuvres de la croix-navigateur.
À l'adresse Kern3l, la durée méthode fonctionne pour moi tout simplement parce que nous essayons d'arrêter un double-clic sur le bouton soumettre. Si vous avez un très long temps de réponse à une demande, je vous recommande de remplacer le bouton "soumettre" ou forme avec un spinner.
Bloquer complètement les présentations subséquentes de la forme, comme la plupart des exemples ci-dessus, a un mauvais côté-effet: si il y a une panne de réseau, et ils veulent essayer de le renvoyer, ils seraient incapables de le faire et serait de perdre les modifications qu'ils ont fait. Ce serait certainement faire une colère utilisateur.
S'il vous plaît, découvrez jquery-safeform plugin.
Exemple d'utilisation:
Correcte. Désactivé élément de formulaire noms/valeurs ne seront pas envoyées au serveur. Vous devez les définir comme readonly éléments.
Aussi, les ancres ne peut pas être désactivé comme ça. Vous aurez besoin de retirer leur HREFs (non recommandé) ou d'empêcher leur comportement par défaut (mieux), par exemple:
$('input[type=submit]').attr("disabled", "disabled");
, mais mon préféré était de mettre enonclick="this.disabled = 'disabled'"
dans la présente onclick.Il y a une possibilité d'améliorer Nathan Long approche.
Vous pouvez remplacer la logique de détection de déjà formulaire soumis avec celui-ci:
Nathan code mais pour jQuery Valider plugin
Si vous arrive d'utiliser jQuery Valider plugin, ils ont déjà gestionnaire de soumission en œuvre et, dans ce cas, il n'y a pas de raison de mettre en œuvre plus d'un. Le code:
Vous pouvez facilement étendre dans le
} else {
-bloc pour désactiver les entrées et/ou le bouton soumettre.Acclamations
J'ai fini par en utilisant les idées de ce post à venir avec une solution qui est assez similaire à AtZako de la version.
En utilisant comme ceci:
J'ai trouvé que les solutions qui n'a pas de délai d'attente, mais juste désactivé la soumission ou de personnes handicapées constituent des éléments causé des problèmes, car une fois le lock-out est déclenché, vous ne pouvez pas soumettre de nouveau jusqu'à ce que vous actualisez la page. Que provoque certains problèmes pour moi quand on fait de l'ajax choses.
Ce qui peut probablement être prettied un peu comme ce n'est pas que de fantaisie.
Si vous utilisez AJAX pour poster un formulaire, définissez
async: false
devrait empêcher les autres soumet avant le formulaire efface:Modifié Nathan solution un peu pour Bootstrap 3. Ceci permettra de définir un chargement de texte pour le bouton soumettre. En outre, il expire au bout de 30 secondes et permet le formulaire doit être soumis.
Utiliser deux boutons submit.
Et jQuery:
J'ai eu des problèmes similaires et ma solution(s) sont comme suit.
Si vous n'avez pas la validation côté client, alors vous pouvez simplement utiliser le jquery, une méthode, comme indiqué ici.
http://api.jquery.com/one/
Cela désactive le gestionnaire d'après son été invoquée.
Si vous êtes en train de faire la validation côté client comme je le faisais alors son légèrement plus compliqué. L'exemple ci-dessus ne vous laissera pas le soumettre à nouveau, après l'échec de la validation. Essayez cette approche au lieu
voici comment je le fais:
crédits: https://github.com/phpawy/jquery-submit-once
Utilisation simple compteur sur "soumettre".
Et appel
monitor()
la fonction de soumettre le formulaire.ce code affiche le chargement sur l'étiquette du bouton, et le bouton set pour
désactivation de l'état, puis, après traitement, de le ré-activer et retourner l'original du texte du bouton**
);
Ma solution:
Dans mon cas, la forme du onsubmit eu quelques validation du code, donc je incrément Nathan Long, y compris un onsubmit point de contrôle
Changement bouton envoyer:
Avec bouton normal:
Puis cliquez sur utiliser la fonction:
Et n'oubliez pas de ré-activer le bouton lorsque est nécessaire:
Je ne peux pas croire que le bon vieux css truc de pointeur-events: none n'a pas encore été mentionnés. J'ai eu le même problème en ajoutant une désactivé attribut, mais ce n'est pas nouveau. Essayez de le ci-dessous et remplacez #SubmitButton avec l'ID de votre bouton soumettre.
Enter
clé.Pourquoi ne pas tout simplement, cette volonté de soumettre le formulaire, mais aussi de désactiver le bouton soumettre,
Aussi, si vous êtes à l'aide de jQuery Valider, vous pouvez mettre ces deux lignes sous
if ($('#myForm').valid())
.Vous pouvez arrêter le deuxième soumettre par le présent
J'ai résolu très semblable à la question de l'aide: