web-dev-qa-db-fra.com

Désactiver le bouton d'envoi UNIQUEMENT après l'envoi

J'ai le HTML et le jquery suivants:

<html dir="ltr" lang="en">
<head>
</head>
<body>

<h2>Test disabling submit button for 1 minute...</h2>

<br/>

<p style="text-align:center"> 
<form id="yourFormId" name="yourFormId" method="post" action="#">
 <input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>




<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script type="text/javascript">

$(document).ready(function () {
    $(".submitBtn").click(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

</script>
<!--script ends here-->

</body>
</html>

En l'état, le bouton d'envoi est désactivé lorsqu'il est enfoncé. Cependant une fois pressé il ne semble pas effectuer la soumission. Si j'ai supprimé le jquery pour désactiver le bouton, le bouton effectue ensuite la soumission normalement.

Comment puis-je désactiver le bouton uniquement après avoir effectué la soumission? le jquery actuel ci-dessus semble entrer en conflit avec l'opération de soumission.

Toute suggestion pour résoudre ce problème serait extrêmement utile.

javascriptjquerybuttonsubmit
28
Dev P

Ajoutez la partie désactivée dans l'événement de soumission.

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});
33
pvnarula

J'ai fait face au même problème. Les clients peuvent soumettre un formulaire, puis plusieurs adresses e-mail recevront un message électronique. Si la réponse de la page prend trop de temps, le bouton a parfois été poussé deux fois, voire plusieurs fois.

J'ai essayé de désactiver le bouton dans le gestionnaire onsubmit, mais le formulaire n'a pas été soumis du tout. Les solutions ci-dessus fonctionnent probablement bien, mais pour moi, c'était un peu trop délicat, alors j'ai décidé d'essayer autre chose.

Sur le côté gauche du bouton de soumission, j'ai placé un deuxième bouton, qui n'est pas affiché et est désactivé au démarrage:

<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>   
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>

Dans le gestionnaire onsubmit joint au formulaire, la soumission "réelle" est masquée et la soumission "fausse" est affichée avec un message indiquant que les messages sont envoyés.

function checkinput // submit handler
{
    ..
    ...
    $("#btnverzenden").hide(); <= real submit button will be hidden
    $("#btnverzenden2").show(); <= fake submit button gets visible
    ...
    ..
}

Cela a fonctionné pour nous. J'espère que cela vous aidera.

18
eheydenr

Hé ça marche,

   $(function(){
     $(".submitBtn").click(function () {
       $(".submitBtn").attr("disabled", true);
       $('#yourFormId').submit();
     });
   });
12
Tukuna

Cette solution présente les avantages de travailler sur mobile et d'être assez simple:

<form ... onsubmit="myButtonValue.disabled = true; return true;">
7
mcastle

Ceci est le script édité, j'espère que cela aide,

   <script type="text/javascript">
        $(function(){
            $("#yourFormId").on('submit', function(){
                return false;
                $(".submitBtn").attr("disabled",true); //disable the submit here
                //send the form data via ajax which will not relaod the page and disable the submit button
                $.ajax({
                   url      : //your url to submit the form,
                   data     : { $("#yourFormId").serializeArray() }, //your data to send here 
                   type     : 'POST',
                   success  : function(resp){
                        alert(resp);    //or whatever 
                   },
                   error    : function(resp){

                   }
                });
            })
        });
    </script>
6
Nil'z

En lisant les commentaires, il semble que ces solutions ne soient pas cohérentes entre les navigateurs. Décidé alors de penser comment j'aurais fait cela il y a 10 ans avant l'avènement de jQuery et de la fonction événementielle.

Voici donc ma solution rétro hipster:

<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false;  }" action="" method="GET">

<input type="submit" value="submit - but only once!"/>
</form>

Le principal point de différence est que je compte sur la possibilité d'arrêter la soumission d'un formulaire en renvoyant false sur le gestionnaire de soumission, et j'utilise une variable de drapeau global - ce qui me fera aller directement en enfer!

Mais du côté positif, je ne peux imaginer aucun problème de compatibilité du navigateur - hé, cela fonctionnerait probablement même dans Netscape!

4
Gordon Rouse

Tester avec un setTimeout, qui a fonctionné pour moi et je pouvais soumettre mon formulaire, fait référence à cette réponse https://stackoverflow.com/a/779785/5510314

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        setTimeout(function () { disableButton(); }, 0);
    });

    function disableButton() {
        $("#btnSubmit").prop('disabled', true);
    }
});
4
Crying Freeman

Mon problème a été résolu lorsque j'ajoute la section bind à mon fichier de script.

Au total, j'ai fait ces 2 étapes:

1 - Désactiver le bouton et empêcher la double soumission:

$('form').submit(function () {
    $(this).find(':submit').attr('disabled', 'disabled');
});

2 - Activer le bouton soumettre si une erreur de validation s'est produite:

$("form").bind("invalid-form.validate", function () {
    $(this).find(':submit').prop('disabled', false);
});
3
MOH3N

Je mets cela dans mon code global pour travailler sur tous les boutons de soumission:

$("input[type='submit']").on("click", function (e) {
    $(this).attr("disabled", true);
    $(this).closest("form").submit()
});
2
kravits88

Comme plusieurs personnes l'ont souligné, la désactivation du bouton d'envoi a des effets secondaires négatifs (au moins dans Chrome cela empêche le nom/la valeur du bouton enfoncé d'être soumis). Ma solution était d'ajouter simplement un attribut pour indiquer que la soumission a été demandée, puis de vérifier la présence de cet attribut sur chaque soumission. Étant donné que j'utilise la fonction de soumission, elle n'est appelée qu'une fois que la validation HTML 5 a réussi. Voici ma code:

  $("form.myform").submit(function (e) {
    // Check if we have submitted before
    if ( $("#submit-btn").attr('attempted') == 'true' ) {
      //stop submitting the form because we have already clicked submit.
      e.preventDefault();
    }
    else {
      $("#submit-btn").attr("attempted", 'true');
    }
  });
1
Mario Hendricks
$(document).ready(function() {
    $(body).submit(function () {
        var btn = $(this).find("input[type=submit]:focus");
        if($(btn).prop("id") == "YourButtonID")
            $(btn).attr("disabled", "true");
    });
}

et en code côté serveur:

protected void YourButton_Clicked(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "$('#YourButtonID').removeAttr('disabled');", true);
}
0
Saeed Taran