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

  1. jQuery Submit API

About the Author

author image
mkyong
Founder of Mkyong.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

Leave a Reply

avatar
newest oldest most voted
Mike
Guest
Mike

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.

Gaurav
Guest
Gaurav

Helps a lot ! Thanks bro

arun
Guest
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
Guest
Praveen

Here is another way to disable submit button after clicked using HTML and JavaScript, without JQuery.

Manas Pattanaik
Guest
Manas Pattanaik

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

Leon Revill
Guest
Leon Revill

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

Stuart Dobson
Guest
Stuart Dobson

Really? No Document.Ready?

ron
Guest
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

Petr
Guest
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???

heru murdiyanto
Guest
heru murdiyanto

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

Ajit Vats
Guest
Ajit Vats

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

Travis
Guest
Travis

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

ohmygod
Guest
ohmygod

What if I have many submit buttons for a form? I need to target a button specifically