Question

I need to avoid the double click submitting behavior. I’m using the client validation with the unobtrusive library. I have the following code for avoiding the double clic:

jQuery.fn.preventDoubleSubmit = function () {
         var alreadySubmitted = false;
         return jQuery(this).submit(function () {

             if (alreadySubmitted)
                 return false;
             else {
                 alreadySubmitted = true;
             }
         });
     };

     jQuery('form').preventDoubleSubmit();

Unfortunately, if my form has some validable fields (for example, a required field), the code above is still being fired, hence, even if I correct any mistakes on the form, I won’t be able to submit it again.

How can I fire the double click code after the validation has been succesfully done?

Answer 1

I solved it with the following code:

var tryNumber = 0;
 jQuery('input[type=submit]').click(function (event) {
     var self = $(this);

     if (self.closest('form').valid()) {
         if (tryNumber > 0) {
             tryNumber++;
             alert('Your form has been already submited. wait please');
             return false;
         }
         else {
             tryNumber++;
         }
     };
 });

NOTE: You can also replace the:

return false;

line, for:

self.attr('disabled', true);

BUT, if you use the name of your submit buttons on your controller for extra logic, they will be sent as null. (you can use an additional hidden field to charge them before submitting)

that’s it, hope it helps

Rodrigo

EDIT: Thanks to these posts:
jquery newbie: combine validate with hidding submit button