Comment empêcher le formulaire de soumettre plusieurs fois du côté du client?

utiliser un javascript discret pour désactiver l'événement soumettre sur le formulaire après qu'il a déjà été soumis. Voici un exemple d'utilisation de jQuery.

EDIT: correction d'un problème avec la soumission d'un formulaire sans cliquer sur le bouton Soumettre. Merci, ichiban.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

j'ai essayé solution de vanstee avec la validation discrète asp mvc 3, et si la validation du client échoue, le code est toujours lancé, et le formulaire soumettre est désactivé pour de bon. Je ne suis pas en mesure de soumettre à nouveau après avoir corrigé fields. (voir le commentaire de bjan)

donc j'ai modifié le script de vanstee comme ceci:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

le contrôle de la soumission des formulaires côté Client peut être réalisé très élégamment en demandant au gestionnaire onsubmit de masquer le bouton submit et de le remplacer par une animation de chargement. De cette façon, l'utilisateur obtient un retour visuel immédiat au même endroit où son action (le clic) s'est produite. En même temps, vous empêchez le formulaire d'être soumis une autre fois.

si vous soumettez le formulaire via XHR gardez à l'esprit que vous devez également gérer les erreurs de soumission, par exemple un délai. Vous devez afficher le bouton soumettre de nouveau parce que l'utilisateur doit soumettre à nouveau le formulaire.

sur une autre note, llimllib soulève un point très valable. Tous la validation d'un formulaire qui doit arriver du côté serveur. Cela comprend des vérifications multiples des présentations. ne faites jamais confiance au client! ce n'est pas seulement un cas si javascript est désactivé. Vous devez garder à l'esprit que tout le code côté client peut être modifié. C'est un peu difficile à imaginer mais le html/javascript parler à votre serveur n'est pas nécessairement le html/javascript que vous avez écrit.

comme llimllib le suggère, générez le formulaire avec un identifiant unique pour ce formulaire et mettez-le dans un champ d'entrée caché. Stockez cet identificateur. Lorsque vous recevez des données du formulaire, ne les traitez que lorsque l'identificateur correspond. (Aussi en liant l'identifiant à la session des utilisateurs et en faisant correspondre cela, aussi, pour une sécurité supplémentaire.) Après le traitement des données supprimer identificateur.

bien sûr, de temps en temps, vous devez nettoyer les identificateurs pour lesquels aucune donnée de formulaire n'a été soumise. Mais très probablement votre site utilise déjà une sorte de mécanisme de" collecte des ordures".

Voici une façon simple de le faire:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

<form onsubmit="if(submitted) return false; submitted = true; return true">

désactiver le bouton Soumettre peu après un clic. Assurez-vous de gérer les validations correctement. Gardez également une page intermédiaire pour toutes les opérations de traitement ou de PD, puis redirigez vers la page suivante. Cela fait en sorte que rafraîchir la deuxième page ne fait pas un autre traitement.

hachez l'heure actuelle, en faire une entrée cachée sur le formulaire. Du côté du serveur, vérifiez le hachage de chaque soumission de formulaire; si vous avez déjà reçu ce hachage, alors vous avez une soumission répétée.

edit: se fier à javascript n'est pas une bonne idée, donc vous pouvez tous continuer à encourager ces idées, mais certains utilisateurs ne l'auront pas activé. La bonne réponse est de ne pas faire confiance aux données de l'utilisateur du côté du serveur.

en utilisant JQuery vous pouvez faire:

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

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

vous pouvez également afficher une barre de progression ou une broche pour indiquer que le formulaire est en cours de traitement.

je sais que vous avez étiqueté votre question avec 'javascript' mais voici une solution qui ne dépend pas du tout de javascript:

c'est un motif webapp nommé PRG , et voici un bon article qui le décrit

vous pouvez empêcher plusieurs soumettre simplement avec:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Vous pouvez essayer safeform plugin jquery.

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

la réponse la plus simple à cette question comme demandé:" parfois, lorsque la réponse est lente, on pourrait cliquer le bouton Soumettre plusieurs fois. Comment faire pour empêcher que cela se produise?"

juste désactiver le bouton soumettre le formulaire, comme le code ci-dessous.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

il désactivera le bouton Soumettre, sur le premier clic pour soumettre. De plus, si vous avez des règles de validation, cela fonctionnera très bien. J'espère que ça aidera.

côté client , vous devez désactiver le bouton Soumettre une fois que le formulaire est soumis avec le code javascript comme la méthode fournie par @vanstee et @chaos.

mais il y a un problème pour le décalage du réseau ou la situation désactivée par javascript où vous ne devriez pas compter sur le JS pour empêcher que cela se produise.

ainsi, du côté du serveur , vous devez vérifier la soumission répétée de la même clients et omettre la répétition qui semble une fausse tentative de l'utilisateur.

la solution la plus simple et élégante pour moi:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

lien pour plus...

la meilleure façon d'empêcher le multiple de la soumission est ce il suffit de passer le bouton id dans la méthode.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

pour ce faire en utilisant javascript est un peu facile. Voici le code qui donnera la fonctionnalité désirée:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

les solutions les plus simples est que désactiver le bouton sur le clic, l'activer après l'opération terminée. Pour vérifier une solution similaire sur jsfiddle:

[click here][1]

et vous pouvez trouver une autre solution sur ce réponse .

ça me va très bien. Il soumet le bouton de ferme et de faire désactiver et après 2 secondes active le bouton.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

in ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

utilisez ce code dans votre formulaire.il va gérer plusieurs clics.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

ça va marcher.

juste pour ajouter aux réponses possibles sans contourner la validation d'entrée du navigateur

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});