In Web development, the most common issue is the double same form submission. Often times, users like to press few time on the submit button to make sure the button is surely clicked, and causing the double form submission issue.

The common solution is disabled the submit button after user clicked on it, and display a loading or submitting message to show user the form is on the progress.

Disable submit button

To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.

	$('p').text("Form submiting.....");
	$('input:submit').attr("disabled", true);	

Enable submit button

To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute.

$('input:submit').attr("disabled", false);	

Try it yourself

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
		border:1px solid blue;
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
		I'm a form ~
	<input type="submit" value="Submit"></input>
        <button>Enable Submit Button</button>
<script type="text/javascript">
	$('p').text("Form submiting.....").addClass('submit');
	$('input:submit').attr("disabled", true);	
	$('p').text("I'm a form ~").removeClass('submit');
	$('input:submit').attr("disabled", false);	
Tags :
Founder of, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.
My website is hosted by Liquid Web, I really like their fast and helpful support, it saved me a lot of time. Furthermore, their servers are extremely reliable, fast and stable, I don't remember when was the last time we had server downtime. Btw, they're offering $100 Coupon now, if you are sourcing for great hosting provider, go grab it.

Related Posts

Popular Posts