Comment prévenir forme de soumettre plusieurs fois de côté client?

Utiliser javascript discret pour désactiver l'événement submit du formulaire après il a déjà été soumis. Voici un exemple d'utilisation de jQuery.

EDIT: correction d'un problème avec l'envoi d'un formulaire sans cliquer sur le bouton soumettre. Merci, ichiban.

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

Côté Client formulaire de contrôle de la présentation peut être réalisé assez élégamment par avoir le onsubmit gestionnaire de masquer le bouton soumettre et de le remplacer par une animation de chargement. De cette façon, l'utilisateur obtient un retour visuel immédiat dans l'endroit même où son action (clic) qui est arrivé. Dans le même temps, vous empêcher le formulaire d'être soumis à un autre moment.

Si vous soumettez le formulaire via XHR garder à l'esprit que vous avez à gérer des erreurs de soumission, par exemple un délai d'attente. Vous devez afficher le bouton soumettre de nouveau parce que l'utilisateur doit soumettre à nouveau le formulaire.

Sur une autre note, llimllib apporte un point très valable. Tous la validation d'un formulaire qui doit arriver du côté serveur. Cela inclut de multiples soumission des contrôles. Jamais la confiance du client! Ce n'est pas seulement une affaire si javascript est désactivé. Vous devez garder à l'esprit que tous les côté client code peut être modifié. Il est un peu difficile à imaginer, mais le html/javascript en parler à votre serveur n'est pas nécessairement le code html/javascript que vous avez écrit.

Comme llimllib suggère, générer le formulaire avec un identificateur unique pour la forme et le mettre dans un champ caché. Magasin identifiant. Lors de la réception des données de formulaire ne traiter que lorsque l'identificateur de matchs. (Également le lien entre l'identificateur de la session des utilisateurs et la correspondance, ainsi, pour plus de sécurité.) Après le traitement de données à supprimer l'identifiant.

Bien sûr, de temps en temps, vous aurez besoin de nettoyer les identifiants qui ne sont jamais toutes les données de formulaire a été soumis. Mais plus que probablement votre site web emploie déjà une sorte de "garbage collection" mécanisme.

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

Vous pouvez aussi afficher une barre de progression ou un compteur pour indiquer que le formulaire est en cours de traitement.

À l'aide de JQuery que vous pouvez faire:

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

&

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

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;

});

La plus simple de répondre à cette question, comme l'a demandé: "Parfois, lorsque la réponse est lente, on peut cliquer sur le bouton soumettre plusieurs fois. Comment faire pour empêcher que cela se produise?"

Il suffit de Désactiver la forme bouton soumettre, comme le code ci-dessous.

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

Il permet de désactiver le bouton soumettre, sur cliquez d'abord pour la présentation. Aussi, si vous avez quelques règles de validation, puis il fonctionne très bien. J'espère que ça aidera.

Le principe le plus simple et élégante solution 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 en savoir plus...

la meilleure façon de prévenir plusieurs de soumission est ce
il suffit de passer le bouton id dans la méthode.

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

Plus simple des solutions est que de désactiver le bouton de clic, l'activer une fois l'opération terminée. Pour vérifier solution similaire sur jsfiddle :

[click here][1]

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

Juste à ajouter aux réponses possibles sans en contournant le navigateur de validation de la saisie

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

Une alternative à ce qui était proposé avant est:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});