Disable submit with multiple forms present

By admin in : Development, JQuery // Aug 2 2010

I recently ran across a situation in which I needed to disable a submit button after it was clicked to avoid duplicate submits of the form. This in itself seemed a pretty simple task to do with jQuery.

I soon learned that the task would be more difficult then I had anticipated. I started the task by using something similar to this.

jQuery(document).ready( function() {<br />
    jQuery('form').submit(function(){<br />
        // On submit disable its submit button<br />
        jQuery('input:submit', this).attr('disabled', 'disabled');<br />
    });<br />
});

I tested and thought all would be good, only it was not. After some double checking of my spelling, I decided to just output the value of the ‘input:submit’. I was surprised to see that it was returning ‘undefined’ as the value.

A few minutes later I find myself scrambling through Google searches and trying different bits of code, none of which was working for me. The task was only suppose to last a few minutes and now I find myself having spent a few hours trying to figure this out. Time for a lunch break.

While on break I decided, how about just figure this out on your own instead of trying to hack someone other developers code. Off to jQuery documentation I went and the first thing I was reminded of was that .each() returns an index. Assuming all of my forms have some type of element with type=submit, I can use this.

The first step was to loop through each form element on page load:

jQuery('form').each(function(formIndex) {});

Now inside of that each loop, lets add some logic:

jQuery(this).submit(function() {<br />
    jQuery('input:submit').eq(formIndex).attr('disabled', 'disabled');<br />
});

This did the trick. I was now able to disable just the one form. Now if I was using this on AJAX script I would just add a return false. Here is the entire code, assuming we are making this an AJAX call.

jQuery(document).ready(function() {<br />
	//Disable all form submit button on click?<br />
	jQuery('form').each(function(formIndex) {<br />
		jQuery(this).submit(function() {<br />
			jQuery('input:submit').eq(formIndex).attr('disabled', 'disabled');<br />
			return false;<br />
		});<br />
	});<br />
});

About the Author

admin has written 22 articles for dingobytes.

Andrew Alba is a Software Engineer who recently relocated to Minneapolis-St Paul area after living in NW Minnesota for two decades. Andrew is currently employed with Internet Broadcasting Systems in St Paul, MN after spending almost five years with Interive Media Group in Fargo, ND. Andrew enjoys developing solutions using CFML, JavaScript, AJAX, PHP and anything else he can steal from the web.