how to prevent double click event on submit button

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> 

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

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.

Edit as per comment:

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

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

try this

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

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

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

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.

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

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

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

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

try this

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