How to disable submit button after clicked with jQuery

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.

$('input:submit').click(function(){
	$('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);	
or
$('input:submit').removeAttr("disabled");

Try it yourself

<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
	.submit{
		padding:8px;
		border:1px solid blue;
	}
</style>
 
</head>
 
<body>
 
<h1>Disabled submit form button after clicked with jQuery</h1>
 
<form action="#">
	<p>
		I'm a form ~
	</p>
	<input type="submit" value="Submit"></input>
        <button>Enable Submit Button</button>
</form>
 
<script type="text/javascript">
 
$('input:submit').click(function(){
	$('p').text("Form submiting.....").addClass('submit');
	$('input:submit').attr("disabled", true);	
});
 
$('button').click(function(){
	$('p').text("I'm a form ~").removeClass('submit');
	$('input:submit').attr("disabled", false);	
});
 
</script>
 
</body>
</html>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, 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.

Comments

  • Pingback: Blue Coaster33()

  • Gaurav

    Helps a lot ! Thanks bro

  • http://www.encodedna.com arun

    I personally think the best way to achieve this is to “redirect” to another page, saying “submission confirmed”. Since, if the user refreshes the page or clicks the F5 button, the submission will occur again, if you are talking about database submission anyway.

  • Praveen
  • Manas Pattanaik

    Thanks a lot bro..
    Your help is really very much appreciated..
    :)

  • http://www.revillwebdesign.com/ Leon Revill

    Take a look at this jquery disable button. Hope this helps! :)

  • http://twitter.com/stuartdotnet Stuart Dobson

    Really? No Document.Ready?

  • ron

    hi can you help me figuring how to disable after 5 clicks of the submit button and how to disable submitting the form with the enter keyboard?

    best regards

  • http://www.navysokou.cz Petr

    how did you solve problem with page caching

    example: open page (browser cache it)
    type submit button, that disable next submit

    on followed page is found error in datas and showed error
    that user may use back button to correct form

    but how… submit disabled form???