JQuery prevents multiple submissions

Question

I want to prevent multiple sending if someone presses one of the submit buttons several times.

Like unbind or undelgate in this case, calling my user- do_some_stuff function do_some_stuff happens once, because I try to use some jquery methods, but I think I did something wrong. Thanks

 $(function() { $('div.ajax').delegate('form button', 'click', function(e) { $(this).do_some_stuff(); e.preventDefault(); }); }); 

Answer 1

Binding and decoupling are deprecated in jQuery.

As with jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

http://api.jquery.com/on/

To answer the question of multiple dispatches, another new addition in JQuery 1.7 is the .one() handler, which attaches an event handler to an object, but only allows it to be run once. This will allow you to prevent multiple shipments.

eg:

 $("form#form1").one("submit", submitFormFunction); function submitFormFunction(event) { event.preventDefault(); $("form#form1").submit(); } 

Note. I am attached to the form submit event, not the button click event.

Answer 2

There are two ways to do this, as indicated by cHao.

 $('form button').prop('disabled', true); 

or

 $('form button').attr('disabled', 'disabled'); 

Answer 3

when you click the button inside the function, add attr (disabled), which will make the button inactive.

 $("form Button").attr("disabled","1"); 

multiple submissions should be prevented

Answer 4

If you have users who insist on an active submit button, you can use the variable to track progress. Something like that:

 saving_record = 0; //set variable to show if form is in submission $(document).ready(function () { $('#form').on('submit', function (e) { if (saving_record === 0) { //If not submitted yet, submit form saving_record = 1; //Set variable to show form is in submission $.ajax({ success: function (data) { saving_record = 0; //Reset variable to allow record update }, error: function (data) { saving_record = 0; //Reset variable to allow record update in case of error } }) } }); }); 

Answer 5

 $(document).ready(function(){ $('div.ajax form').submit(function(){ $(this).do_some_stuff(); return false; }); }); 

Answer 6

If you use ASP.NET MVC data annotations for client-side validation, you first need to validate the form -

 // To prevent multiple post function buttonsubmit() { $('form').submit(function () { if ($('form').valid()) { $(this).find("input[type='submit']").prop('disabled', true); } }); }