web-dev-qa-db-fra.com

comment empêcher un événement de double clic sur le bouton d'envoi

J'ai un bouton de soumission dans ma page. Parfois, lorsque je double-clique dessus, le double soumet évidemment, et le problème est que j'enregistre les informations dans la base de données afin que les informations soient dupliquées, et je ne le souhaite pas. J'ai essayé un code jQuery comme ci-dessous mais cela n'a pas fonctionné pour moi.

Ici ma balise de bouton est: 

<input type="submit" id="btnSubmit" class="btn btn-large btn-success"    style="padding-right:40px; padding-left:40px; text-align:center;">

Jquery:

   $(document).ready(function()
   {
     $('#btnSubmit').dblclick(function()
     {
        $(this).attr('disabled',true);
        return false;
     });
    });

Comment continuer? Preventdefault ne fonctionne pas

$(document).ready(function () {
    alert("inside click");
    $("#btnSubmit").on('dblclick', function (event) {  

       event.preventDefault();

 });
});
jquerybutton
4
sireesha j

Utilisez setTimeout pour une utilisation plus conviviale 

$(document).ready(function () {
     $("#btnSubmit").on('click', function (event) {  
           event.preventDefault();
           var el = $(this);
           el.prop('disabled', true);
           setTimeout(function(){el.prop('disabled', false); }, 3000);
     });
});
5
madalinivascu

il suffit de mettre cette méthode dans vos formulaires, puis il gérera un ou plusieurs clics une fois. Une fois la demande envoyée, il ne sera pas possible d’envoyer de nouveau une demande.

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

Vous pouvez également utiliser jquery one() pour y parvenir. Cela ne déclenche l'événement qu'une seule fois et empêche ensuite le gestionnaire d'événements.

$(document).ready(function () {
     $("#btnSubmit").one('click', function (event) {  
           event.preventDefault();
           $(this).prop('disabled', true);
     });
});
2
Nandhini

Ce que vous devriez faire, c'est désactiver le bouton sur l'événement FIRST mouseup et le laisser désactivé jusqu'à ce que votre appel ajax aboutisse.

$(document).on('ready', function(){
    $('#btnSubmit').on('mouseup', function(event){
        var $this = $(this);
        if($this.prop('disabled')) return;
        $(this).prop('disabled',true);
        $.ajax({
            /*
            Your config
            */,
            success: function(data){
                console.log(data);
                $this.prop('disabled', false);
            }
        });
    });
});
1
AdityaParab

preventDefault() arrête l'événement d'origine

Fiddle: http://zeering.in/aE6EpDZ6UPU=/Prevent-Double-Click-event-by-disabled-Button-using-J Query

$(document).ready(function()
{
    $('#btnSubmit').dblclick(function(event)
    {
        event.preventDefault();
        $(this).attr('disabled',true);
        return false;
    });
});

Mais pour la meilleure solution, je me réfère à cet article

0
Ramon Bakker

essaye ça 

$(document).ready(function () {
     $("#btnSubmit").one('click', function (event) {  
           event.preventDefault();
           //do something
           $(this).prop('disabled', true);
     });
});

0
JYoThI

celui de jQuery () lancera le gestionnaire d'événements attaché une fois pour chaque élément lié, puis supprimera le gestionnaire d'événements.

Si, pour une raison quelconque, cela ne remplit pas les conditions requises, vous pouvez également désactiver le bouton après avoir cliqué dessus.



          $(document).ready(function () {
               $("#btnSubmit").one('click', function (event) {  
               event.preventDefault();
               //do something
               $(this).prop('disabled', true);
               });
          });
0
Monish Mano Stephen

essaye ça,

$(document).ready(function () {
    $("#btnSubmit").on("click", function() {
        $(this).attr("disabled", "disabled");
        doWork(); //this method contains your logic
    });
});
0
Prabhat Sinha

Si vous soumettez un formulaire; event.preventDefault () va arrêter la première soumission du formulaire. Si vous désactivez le bouton en cliquant, le formulaire ne sera pas envoyé car il est maintenant désactivé. De toute façon, le formulaire ne sera jamais soumis.

Ce que vous voulez faire, c'est arrêter de soumettre le formulaire deux fois, plutôt que de cliquer deux fois sur le bouton. 

Essaye ça:

$('form[action="/Account/Login"]').on('submit', function () {
    $(this).find('button[type="submit"]').prop('disabled', true);
})

Lors de la soumission du formulaire, comme lorsque vous avez cliqué sur n'importe quel bouton de soumission, il recherche tout autre bouton de soumission du formulaire et le désactive. Assurez-vous de définir l'action à la vôtre.

0
Tod