Enable/Disable Form Submit Button with jQuery

Written by Saran on , Updated June 24, 2015
If you are creating a HTML form, especially jQuery Ajax driven form, you might want to disable the submit button while page goes into loading mode, because you don't want user to resubmit same content and cause script failure. To prevent this from happening, we need to disable submit button, here's how.

jQuery 1.6 or above

If you are using jQuery 1.6 or above you can use jQuery prop() to disable a button.
JQUERY
  • 1
  • 2
//where #submit_button is id of your form submit button
$("#submit_button").prop( "disabled", true);
So if user clicks on submit button, you can disable it like this :
JQUERY
  • 1
  • 2
  • 3
  • 4
$("#submit_button").click(function () {
	$(this).prop( "disabled", true);
	//$(this).prop( "disabled", false); //to enable button just set 2nd parameter false
});

Below jQuery 1.6

If you are still using jQuery 1.5, you can try another jQuery method called .attr()
JQUERY
  • 1
$("#submit_button").attr("disabled", "disabled");
To disable submit on click, you can do something like this:
JQUERY
  • 1
  • 2
  • 3
  • 4
$("#submit_button").click(function () {
	$(this).attr("disabled", "disabled");
	//$(this).removeAttr("disabled");//enable button again
});
New question is currently disabled!

  • About Sanwebe.com

    Sanwebe.com was founded in 2011 by Saran Chamling. A blog truely inspired by the ever changing web development world. It is a small effort to provide useful tips, tutorials and related resources to web developers.
© Sanwebe.com 2011-2024. All codes MIT license | Snippets | Contact