jQuery – How to disabled submit button after clicked
Often times, users like to press a few times on the submit button to make sure the button is surely clicked, and causing the double form submission issue. The common solution is disables the submit button after user clicked on it.
1. Enable / Disable submit button
1.1 To disable a submit button, you just need to add a disabled attribute to the submit button.
$("#btnSubmit").attr("disabled", true);
1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.
$('#btnSubmit').attr("disabled", false);
or
$('#btnSubmit').removeAttr("disabled");
2. jQuery full example
<!DOCTYPE html>
<html lang="en">
<body>
<h1>jQuery - How to disabled submit button after clicked</h1>
<form id="formABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit"></input>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal abc" id="btnTest"></input>
<script>
$(document).ready(function () {
$("#formABC").submit(function (e) {
//stop submitting the form to see the disabled button effect
e.preventDefault();
//disable the submit button
$("#btnSubmit").attr("disabled", true);
//disable a normal button
$("#btnTest").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
References
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
Thanks for this awesome post, but there is just one issue that if there are HTML5 required fields and if form is submitted without them, submit button is still disabled. Please help me to cope with it.
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
I tried this, and it breaks the form submission.
This solution disables the submit button (to prevent multiple submissions), but still allows a single submission:
http://stackoverflow.com/questions/17106885/disable-submit-button-only-after-submit
thanks. it works for me.
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.
r6u5y
But I can’t get value of button in php
thanks
Thanks
Thank you for the post, It helped me out with my button issue.
asdfas
Like
Thanks for this article. I’d also like to convey that it can always be hard if you find yourself in school and starting out to initiate a long history of credit. There are many college students who are only trying to live and have long or good credit history can often be a difficult thing to have. edgcecaeedcfbekk
on this demo is working, but why when i try to tes in localhost this source code isn’t working ? can u help me . thanks
download free themes for your website, and also e-commerce solution, hire freelancer on low cost, make website at low cost. please visit our site :
http://www.freelancingdesign.com
Helps a lot ! Thanks bro
Here is another way to disable submit button after clicked using HTML and JavaScript, without JQuery.
Thanks a lot bro..
Your help is really very much appreciated..
🙂
Take a look at this jquery disable button. Hope this helps! 🙂
Really? No Document.Ready?
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???
thanks it worked for me on onesoftwares.
Thanks for the information!
What if I have many submit buttons for a form? I need to target a button specifically
Nhnbbbhh