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

Parfois, lorsque la réponse est lente, on peut cliquer plusieurs fois sur le bouton Soumettre.

Comment éviter que cela ne se produise?

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

MODIFIER: 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é la solution de vanstee avec la validation discrète d'asp mvc 3, et si la validation du client échoue, le code est toujours exécuté et la soumission du formulaire est désactivée pour de bon. Je ne peux pas soumettre à nouveau après avoir corrigé les champs. (voir le commentaire de bjan)

J'ai donc 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 soumission de formulaire côté client peut être obtenu de manière assez élégante en demandant au gestionnaire onsubmit de masquer le bouton d'envoi 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. Dans le 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 d'expiration. Vous devrez à nouveau afficher le bouton d'envoi car l'utilisateur doit resoumettre le formulaire.

Sur une autre note, llimllib soulève un point très valable. Toute validation de formulaire doit avoir lieu côté serveur. Cela comprend plusieurs contrôles de soumission. 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 qui parle à votre serveur n'est pas forcément le html / javascript que vous avez écrit.

Comme le suggère llimllib, générez le formulaire avec un identifiant unique pour ce formulaire et placez-le dans un champ de saisie masqué. Stockez cet identifiant. Lors de la réception des données du formulaire, ne les traitez que lorsque l'identifiant correspond. (Lier également l'identifiant à la session des utilisateurs et faire correspondre cela également pour plus de sécurité.) Après le traitement des données, supprimez l'identifiant.

Bien sûr, de temps en temps, vous devrez nettoyer les identifiants pour lesquels aucune donnée de formulaire n'a été soumise. Mais très probablement, votre site Web utilise déjà une sorte de mécanisme de «ramassage des ordures».

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

Voici un moyen 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>

Désactivez le bouton d'envoi peu de temps après un clic. Assurez-vous de gérer correctement les validations. Conservez également une page intermédiaire pour tous les traitements ou opérations DB, puis redirigez vers la page suivante. Cela garantit que l'actualisation de la deuxième page n'effectue pas un autre traitement.

Hash l'heure actuelle, en faire une entrée masqué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, vous avez une soumission répétée.

edit: s'appuyer sur javascript n'est pas une bonne idée, vous pouvez donc tous continuer à voter pour ces idées, mais certains utilisateurs ne l'activeront pas. La bonne réponse est de ne pas faire confiance aux entrées de l'utilisateur côté serveur.

Vous pouvez également afficher une barre de progression ou une double flèche pour indiquer que le formulaire est en cours de traitement.

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 
     } 
    }
   );

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

C'est un modèle d'application Web nommé PRG , et voici un bon article qui le décrit

Vous pouvez empêcher l'envoi multiple 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 réponse la plus simple à cette question est posée: "Parfois, lorsque la réponse est lente, on peut cliquer plusieurs fois sur le bouton d'envoi. Comment éviter que cela ne se produise?"

Désactivez simplement le bouton d'envoi de formulaire, comme le code ci-dessous.

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

Cela désactivera le bouton de soumission, au premier clic pour la soumission. De plus, si vous avez des règles de validation, cela fonctionnera très bien. J'espère que cela aidera.

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

Mais il y a un problème de retard du réseau ou de situation de désactivation de javascript où vous ne devriez pas compter sur le JS pour empêcher que cela se produise.

Donc, côté serveur , vous devriez vérifier la soumission répétée des mêmes clients et omettre la soumission répétée qui semble une fausse tentative de l'utilisateur.

Vous pouvez essayer le plugin safeform 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 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 en savoir plus ...

Utilisez ce code dans votre formulaire. Il gérera plusieurs clics.

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

cela fonctionnera à coup sûr.

Cela permet de soumettre toutes les 2 secondes. En cas de validation frontale.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

la meilleure façon d'empêcher la soumission multiple est de transmettre simplement l'identifiant du bouton dans la méthode.

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

Pour ce faire, utiliser javascript est un peu facile. Voici le code qui donnera la fonctionnalité souhaité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 sont de désactiver le bouton au clic, de l'activer une fois l'opération terminée. Pour vérifier une solution similaire sur jsfiddle:

[click here][1]

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

Cela fonctionne très bien pour moi. Il soumet la ferme et rend le bouton désactivé 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);}

Dans le Syntex ECMA6

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

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

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

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();
        }
    });
});

Une alternative à ce qui a été proposé auparavant est:

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