How to use jQuery to Prevent Multiple Form Submit for Efficient Forms
Often when a jQuery form is submitted, it can accidentally happen more than once. Depending on the server speed or the internet connection, the request to submit the form can go through slowly, which often leads to the user hitting the submit button more than once because they may think it isn't working. When this happens, the form can be submitted multiple times, which isn't a huge deal, but can definitely lead to some clogging up of your inbox.
A really good way to prevent this from happening is to use some simple jQuery code that disables the submit button after it's been submitted. The code to add this functionality to any of your projects is efficient, lightweight, and less than 15 lines.
$('form').submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$('input[type=submit], input[type=button]', this).each(function() {
$(this).attr("disabled", "disabled");
});
return true;
}
else
{
return false;
}
});