Empecher le double envoi d'un formulaire

eRaph
Javascript

Bonjour à tous,
Je sais que ce sujet a déjà été abordé de nombreuses fois sur différents forum, mais dans mon cas, impossible de trouver une solution correcte.
J'utilise un formulaire de paiement personnalisé (intégration de l'outil BrainTree) et je souhaite tout simplement que le bouton SUBMIT devienne 'disabled' une fois que l'on a cliqué dessus. Le hic, c'est qu'en mettant un evenement JS 'onclick' ou 'onsubmit' sur le bouton ou le formulaire, les infos ne sont plus envoyées à mon plugin Braintree, et rien ne se passe.
Ci-dessous quelques extraits de mon code :

 <script type="text/javascript">
      function desactiver() {
            $('#submit').prop('disabled', true);
                    return true;                
            }
  </script>

<form action="/paiement/" class="form-horizontal" id="checkout" method="post" accept-charset="utf-8"> 

---Ici mes différents input de formulaire que je n'ai pas fait apparaître

<input class="btn btn-lg btn-block btn-success"  type="submit"  onclick="desactiver()" id="submit" value="Payer">
</form>

<!-- SCRIPT DE PAYEMENT BRAINTREE -->
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
    braintree.setup("<?= $clientToken; ?>", "custom", {id: "checkout"});
</script>

Si quelqu'un a des idées comment faire ça tout simplement, ce serait top !
Merci d'avance.

8 réponses

JC_Pires
Réponse acceptée

Comment le rendre disabled:

    $('#submit').click(function(){
        e.preventDefault; //On stop l'évènement par défault
        $(this).val('Envoi en cours'); // Onchange la valeur pour avoir un retour visuel
        $(this).attr("disabled", true); // On s'assure du fait que le bouton ne sera plus cliquable, tu peut meme rajouter une classe ?!?!
    }

Bon j'adapte en fonction mais je pense que c'est correct.

eRaph
Auteur
Réponse acceptée

Incroyable, je crois que je viens de trouver : il fallait supprimer l'id de mon bouton submit, et là tout marche nickel. C'est incompréhensible...

antho07

Bonjour,

Place un booleen :

var requeteEnCours = false;

$('#submit').click(function(){
if(!requeteEnCours){
requeteEnCours = true;
//Appel ajax et dans les callback de success et d error remettre le requeteEnCours = false; si besoin
}
});
SimonAndGarfunkel

Bonsoir eRaph,
voici le truc que je fais lorsque je souhaite éviter la soumission multiple d'un formulaire :

$('form').submit(function(e){
    e.preventDefault();
    $('form input[type=submit]').prop('disabled', true);
    $(this).unbind('submit').submit();
});

@antho07 : je pense que ton code n'empêche pas l'envoi du formulaire. Il faudrait que tu ajoutes un preventDefault. Et l'utilisation de l'évènement "click" ne prévoit pas la soumission du formulaire pas la touche "entrée"

++

antho07

@SimonAndGarfunkel

Le code est donné à titre indicatif, il a déjà utilisé un évènement onclick dans son code, c'est pour ça que je l'ai repris.

Il parle de notion de double soumission, ce n'est pas très clair. Mon poste répond à la problèmatique classique de

  • Je clique
  • Il se passe rien alors je reclique (alors qu'en faite la requête a été envoyé mais la réponse non recu encore)
  • J'ai soumis 2 fois .

Le problème n'a peut être rien avoir ... mais j'ai du mal à voir où pourrait se produire un problème de "double envoi" autrement..

eRaph
Auteur

Hello à tous !
Merci pour vos diverses réponses très instructives. Malgré tout, même en les essayant, le bouton submit est bien passé 'disabled', mais l'envoi du formulaire ne se fait pas ! Je pense que cela vient notamment du javascript BrainTree (<script src="https://js.braintreegateway.com/v2/braintree.js"></script>) qui doit intérferer. Je pense qu'il analyse que j'essaye de faire un étape intermediaire avant l'envoi, et m'interdit du coup toute action (sans doute pour ne pas récuperer les infos de paiement ?).
Du coup, malgré vos réponses constructives, je reste au point mort...

Balbert

Bonjour @eRaph,

Je vous propose de faire ceci ->

var clique = true;

$('#submit').click(function(event) 
{
    if(clique) 
    {
        clique = false;
        return true;
    }
    else return false;
})

N'oubliez pas de mettre 'submit' comme id de votre bouton.

eRaph
Auteur

Merci à tous pour vos commentaires et propositions, mais je m'arrache les cheveux sur ce problème depuis au moins 5 heures !
Dès que j'ajoute un événement javascript en onsubmit() à mon formulaire, du type "disable" le boutton submit, aucun envoi n'est fait par le formulaire ! Je n'en peux plus de ne pas comprendre !!
Si quelqu'un a une idée, je suis vraiment preneur car j'en peux plus !!