How to disable the submit button upon form submission

From time to time some of you may notice that you receive multiple requests from your form submissions. Be it an email or database record, the problem is not with your programming but with the actual form. Just see it for yourself, start clicking on your form’s submit button repeatedly and you will receive numerous submissions within seconds.

The following example will show you how to disable the submit button on form submission using mootools and it will work in most of the browsers.

window.addEvent('domready',function(){
	$$('input[type=submit]').addEvent('click',function(e){
		this.clone().inject(this,'after').set('disabled',true).set('value','Processing...');
		this.setStyle('display','none');
	});
});

What this code does is that it simply duplicates the submit button, injecting it after the original one, changing its text to “Processing…” and hides the original one. So it essentially looks like only the text is being changed. The reason why we are cloning the original submit button is because ie6 does not let you submit the form when you disable the submit button.

Enjoy

Tags: disable submit, form submission, mootools custom form