how to prevent double click event on submit button

Question

I have a submit button in my page. Sometimes when I double click it double submits obviously, and the problem is that I'm saving the information in the database so I'll have duplicate information there, and I don't want that. I tried some jquery code like below but it didn't work for me.

Here my button tag is:

<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;
     });
    });

How to proceed further?Preventdefault is not working

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

       event.preventDefault();

 });
});

The problem is duplicate information then you should disable the button after click — Shine, Apr 21 '16 at 11:10
Possible duplicate of [Prevent double submission of forms in jQuery](http://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery) — Teo, Apr 21 '16 at 11:10

score 14 · Accepted Answer · answered Apr 21 '16 at 11:32

14

Use setTimeout for a more user friendly way

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

answered Apr 21 '16 at 11:32

madalinivascu

32,064
4
39
55

6

Am I being soft? event.preventDefault(); is going to stop the button doing anything, all this will do is disable the button for 3 seconds. It won't submit the form. ever. – Tod Jun 22 '18 at 14:50
@Tod this answer expects the form to be submitted via ajax, a normal form will redirect the page, so this answer will not work for normal forms – madalinivascu Jun 25 '18 at 05:32
1

this for some reason does not work as expected with chrome. Firefox works perfectly though. – Simos Fasouliotis May 31 '19 at 09:40
If you have a form submit event trigger (on chrome only) if the #btnSubmit event hits, the form event does not triiger at all. i'll upload a fiddle to demonstrate later. – Simos Fasouliotis May 31 '19 at 09:53
1

@SimosFasouliotis you situation is completely different from my answer, you have a submit event that triggers your ajax so you need to execute the timeout in the submit event https://jsfiddle.net/eoztv4ds/ – madalinivascu May 31 '19 at 12:00
this isn't the definitive answer but helps – the-breaker Mar 03 '20 at 18:38
Note, that disabling the button like this in the click handler also prevents the form from sending the information what button was used to the server (if this is important for the application, for example if there are more buttons to click). – Jakuje Oct 03 '20 at 13:32

score 10 · Answer 2 · answered Sep 19 '17 at 09:24

just put this method in your forms then it will handle double click or more clicks in once. once request send it will not allow to send again and again request.

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

It worked for me ...thank you from 2023 :) – Carlos Morales Aug 13 '23 at 19:56 — Carlos Morales, Aug 13 '23 at 19:56

score 4 · Answer 3 · answered Apr 21 '16 at 11:15

You can also use, jquery one() to achieve it, this will fire the event only once and then prevent the event handler.

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

score 4 · Answer 4 · answered Mar 21 '19 at 12:16

4

I ran into this question as I was attempting to prevent double clicking of form submit buttons. It turns out jQuery has a way to act upon submit of a form.

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

This allowed the submit action as well as the button becoming disabled after the first click.

answered Mar 21 '19 at 12:16

illpallozzo

61
6

2

Thank you very much! – Kerem Nayman Jan 12 '21 at 15:27
Simple and it works – Dan Nov 07 '21 at 22:08
Worth nothing that `disabled` is a property and should be set using `.prop()`, not `.attr()`. attr() works, obviously, but it's not strictly-speaking correct. https://api.jquery.com/prop/ – Tieson T. Nov 19 '22 at 01:03

score 1 · Answer 5 · answered Apr 21 '16 at 11:16

What you should be doing is disabling the button on FIRST mouseup event and keep it disabled till your ajax call succeeds.

$(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);
            }
        });
    });
});

score 0 · Answer 6 · edited May 23 '17 at 12:02

0

preventDefault() stops the original event

Fiddle: 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;
    });
});

But for the better solution, i refer to this post

edited May 23 '17 at 12:02

Community

1
1

answered Apr 21 '16 at 11:09

Ramon Bakker

1,075
11
24

How it restrict when we put another click before the page submit – Shine Apr 21 '16 at 11:12

score 0 · Answer 7 · answered Apr 21 '16 at 11:23

0

try this

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

answered Apr 21 '16 at 11:23

JYoThI

11,977
1
11
26

Monish Mano Stephen · Answer 8 · 2016-04-21T11:31:10.277

jQuery's one() will fire the attached event handler once for each element bound, and then remove the event handler.

If for some reason that doesn't fulfill the requirements, one could also disable the button entirely after it has been clicked.



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

score 0 · Answer 9 · answered Jun 22 '18 at 15:03

If you are submitting a form; event.preventDefault() is going to stop the form submitting the first time. If you disable the button on 'click' the form won't submit because the button is now disabled. Either way, the form will never submit.

What you want to be doing is stopping the form being submitted twice, rather than the button being clicked twice.

Try this:

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

On form submit, as in when the any submit button has been clicked, it'll look for any other submit button in the form and disable it. Make sure you set the action to yours.

score 0 · Answer 10 · edited May 30 '21 at 20:51

0

To prevent clicking a submit button twice on a form, or to allow user to do something once on a page, I would do something like this:

$("#btnSubmit").bind ('click', function() {});
$("#btnSubmit").unbind('click');

edited May 30 '21 at 20:51

Dharman

30,962
25
85
135

answered May 30 '21 at 20:45

Saumya Jain

1

score 0 · Answer 11 · answered Sep 24 '21 at 07:57

I had some problems that disabling the button would stop the app from working in case there was invalid data reported from the server side. Therefore i solved it like this:

$("#issue-create-submit").on('click', function (event) {
    var el = $(this);
    var alreadyClicked = el.prop('alreadyClicked');
    if (alreadyClicked) {
        event.preventDefault();
    } else {
        el.prop('alreadyClicked', true);
        setTimeout(function(){
            el.prop('alreadyClicked', false);
        }, 3000);
    }
});

score 0 · Answer 12 · answered Dec 09 '21 at 20:42

0

<form>
...
<input type="submit" name="submit" value"Submit" onClick="preventDoubleSubmit(this)">
</form>


function preventDoubleSubmit(a){
    var n=$(a).attr('name'),
        v=$(a).val();
    if(n)
        $(a).after('<input type="hidden" name="'+n+'"'+(v?' value="'+v+'"':'')+'>');
    $(a).parents('form').submit();
    a.disabled=true;
    a.style.opacity=0.5;
}

answered Dec 09 '21 at 20:42

Евгений Политовский

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 10 '21 at 00:16

score 0 · Answer 13 · answered Sep 20 '22 at 16:47

This will validate the form and prevent double posting on a form submit event.

$("#Form").submit(function () {
    var valid = $("#Form").valid();
    if (valid === false)
        return false;

    /** prevent double posting */
    if ($("#Form").data().isSubmitted) {
        return false;
    }

    /** mark the form as processed, so we will not process it again */
    $("#Form").data().isSubmitted = true;
    return true;
});

score -1 · Answer 14 · answered Apr 21 '16 at 11:26

-1

try this

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

answered Apr 21 '16 at 11:26

JYoThI

11,977
1
11
26

Luckily this answer is not almost a duplicate – Ramon Bakker Apr 21 '16 at 11:31

how to prevent double click event on submit button

14 Answers14