How do I add STOP Multiple Form Submit with JQuery Validation

Question

I would like to stop disable submit button once validation is completed and form is submitting so I will not have multiple inserts to DB. I have not updated post with full f

Answer 1

I think something like this should work

$( "#UploadForm" ).submit(function(){
  //some other code here
  $('#submit').attr('disable',true).css('pointer-events','none');
});

There is an attribute "disable" that will typically stop the button from being usable. Pointer events is a newer css variable that can do the same as event.preventDefault();

But there is always preventDefault as well:

$( "#UploadForm" ).submit(function(){
  //some other code here
  $('#submit').click(function(event){
     event.preventDefault();
  });
});

Are you using ajax? If so you might want to remove the disable attribute and change pointer-events to auto after the ajax sends its callback.

To clarify on this, the example I give here is only to do as the question asked and disable the submit button. Nothing less, nothing more. It can work along side validate without trying to add anything special.

Answer 2

In your submitHandler disable the submit button:

$("#UploadForm").validate({

   //all your options here

   submitHandler:function(form){
       $('#submit').attr('disabled','disabled');
   }
});

submitHandler is only called when the form has successfully been validated. As long as it returns true, the form will submit as normal afterwards. If you wanted to get more fancy and not disable the submit button, you could have a global variable to remember whether the form has been submitted, and then just return false from this function after the first time.

Working example with submit button being disabled after the first submit: http://jsfiddle.net/ryleyb/hHAvD/

Answer 3

Simplest method that should work everywhere, obviously you would run your code and re-enable it if necessary:

$(document).ready(function(){
    $("#submitBtn").on("click",function(){
        $(this).attr("disabled","disabled");
    });
});

http://jsfiddle.net/calder12/8Syrh/1/

Answer 4

i had the same problem and i came with a simple solution. from javascript i am sending a flag in cookie for every time submit is clicked, then checking the cookie on the server side, if the cookie is a valid one then performing the respective action other wise redirecting the control to the user.

Note : i m a java developer so i m not uploading the code, but i think this can also be achieved in .net, php and other languages.