La désactivation de formulaires avec javascript sur soumettre pour éviter la double soumettre

Question

Je voudrais désactiver une forme après sa présentation afin d'éviter la double soumissions. Joli cas d'utilisation normale je pense, mais tous les exemples que je peut trouver là-bas sont défectueux.

Tout ce que je peux trouver est basé sur la désactivation du bouton d'envoi, mais cela ne l'empêche pas la forme d'être soumis à nouveau si l'utilisateur touche la touche entrée sur la forme, ce qui est une approche assez commune.

Je pense à modifier l'un des scripts existants là pour expliquer cela, mais avant que je réinventer la roue, personne ne sait d'un script qui gère déjà correctement ce qu'ils sont en mesure de partager? Je suis vraiment surpris, il ne semble pas être quelque chose là-bas encore.

Answer 1

Vous pouvez créer une variable booléenne (ou un objet avec une variable membre booléenne) et seulement soumettre le formulaire lorsque la variable est fausse. Quelque chose comme:

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

Bien sûr, vous devez appeler init suite à la charge de la page, quelle qu'en soit la saveur que vous choisissez de le faire (window.onload = ..., window.addEventListener(...), window.attachEvent(...), etc.).

Answer 2

http://jsfiddle.net/c2N4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

Answer 3

J'ai essayé beaucoup de solutions, mais aucun d'entre eux travaillaient pour moi. J'ai utilisé celui-ci et il fonctionne vraiment bien:

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML / PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>