comment éviter le double événement de clic sur le bouton soumettre

J'ai un bouton "soumettre" dans ma page. Parfois, quand je double clic double soumet évidemment, et le problème c'est que je suis d'enregistrer les informations dans la base de données donc je vais avoir des informations en double, et je n'en veux pas. J'ai essayé un peu de jquery code comme ci-dessous mais il ne fonctionne pas pour moi.

Voici mon bouton de la balise est:

HTML:

<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 aller plus loin?Preventdefault ne fonctionne pas

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

       event.preventDefault();

 });
});
InformationsquelleAutor sireesha j | 2016-04-21
  1. 8

    Utiliser setTimeout de manière 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);
     });
});
    • Suis-je doux? de l'événement.preventDefault(); va arrêter le bouton rien faire, tout cela va faire est de désactiver le bouton pendant 3 secondes. Il ne sera pas nécessaire de soumettre le formulaire. jamais.
    • cette réponse s'attend à ce que le formulaire puisse être soumis via ajax, une forme normale va rediriger la page, de sorte que cette réponse ne fonctionnera pas pour les formes normales
    • ceci pour une raison quelconque ne fonctionne pas avec google chrome. Firefox fonctionne parfaitement bien.
    • woks comme prévu jsfiddle.net/zy8ahxn3
    • Si vous disposez d'un formulaire de soumission de l'événement de déclenchement (sur chrome uniquement) si le #btnSubmit événement hits, la forme de l'événement n'a pas triiger à tous. je vais télécharger un violon pour démontrer plus tard.
    • vous situation est complètement différente de ma réponse, vous devez soumettre un événement qui déclenche l'ajax, donc vous avez besoin pour exécuter le délai d'attente dans l'événement submit jsfiddle.net/eoztv4ds

    InformationsquelleAutor madalinivascu
  2. 3

    Vous pouvez également utiliser, jquery one() pour y parvenir, cela déclenche l'événement qu'une seule fois et puis d'empêcher le gestionnaire d'événement.

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

    viens de mettre cette méthode dans vos formulaires, alors il sera de poignée double-cliquez ou plus de clics en une fois.
    une fois la demande de l'envoyer, il ne sera pas autorisé à envoyer de nouveau et de nouveau la demande.

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

    Ce que vous devriez faire est de désactiver le bouton sur la PREMIÈRE mouseup de l'événement et de le garder désactivé jusqu'à ce que votre appel ajax réussit.

    $(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);
            }
        });
    });
});
    InformationsquelleAutor AdityaParab
  5. 0

    essayer cela,

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

    essayer cette

    JS:

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

    InformationsquelleAutor JYoThI
  7. 0

    preventDefault() cesse de l'événement d'origine

    Violon: http://zeering.in/aE6EpDZ6UPU=/Prevent-Double-Click-event-by-disabled-Button-using-JQuery

    $(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 à ce post

    • Comment restreindre quand on met un autre clic avant que la page soumettre
    InformationsquelleAutor Ramon Bakker
  8. 0

    de jQuery() déclenche l'événement attaché gestionnaire d'une fois pour chaque élément lié, puis supprimer le gestionnaire d'événements.

    Si, pour une raison qui ne remplit pas les exigences, on peut aussi désactiver le bouton entièrement après qu'il a été cliqué.

    

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

    Si vous soumettez un formulaire; événement.preventDefault() qui va empêcher le formulaire de soumission de la première fois. Si vous désactivez le bouton sur 'cliquez sur' la forme ne se soumettent pas car le bouton est maintenant désactivé. De toute façon, la forme ne sera jamais soumettre.

    Ce que vous voulez faire est d'arrêter le formulaire soumis deux fois, plutôt que le bouton ne soit cliqué deux fois.

    Essayez ceci:

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

    Sur le formulaire de soumission, comme lors de la toute soumettre le bouton a été cliqué, il va chercher pour n'importe quel autre bouton soumettre le formulaire et de le désactiver. Assurez-vous de définir l'action à la vôtre.

    InformationsquelleAutor Tod
  10. 0

    J'ai couru dans cette question, comme je l'ai été de tenter de prévenir la double cliquant de soumettre le formulaire boutons.
    Il s'avère jQuery a une façon d'agir sur submit d'un formulaire.

    $('#myForm').on('submit', function () {
    $('#submit').attr('disabled', 'disabled');
});

    Ce qui a permis le soumettre action, ainsi que le bouton de devenir invalide après le premier clic.

    InformationsquelleAutor illpallozzo
  11. -1

    essayer cette

    JS:

    $(document).ready(function(){
  $('#btnSubmit').dblclick(function(e){
    e.preventDefault();
  });
});

    • Heureusement, cette réponse est presque pas un doublon
    • rien ne fonctionne pour moi,encore une fois il montre à double entrées.
    InformationsquelleAutor JYoThI