Disable submit button on form submission with JavaScript/jQuery
This post will discuss how to disable the submit button on form submission with JavaScript and jQuery. A button is called disabled if it can’t be selected, clicked on, or accept focus.
The idea is to use the disabled HTML attribute to disable a submit button on its click.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { this.disabled = true; // … } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html lang="en"> <body> <form> <p>Choose your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> </div> <div> <button id="submit" type="submit">Submit</button> </div> </form> </body> </html> |
CSS
|
1 2 3 4 5 |
button { font-size: 14px; margin: 15px; padding: 0 15px; } |
With jQuery, you can use the .prop() method to disable the submit button.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $('button[type=submit]').click(function() { $(this).prop('disabled', true); // … }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html lang="en"> <body> <form> <p>Choose your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> </div> <div> <button type="submit">Submit</button> </div> </form> </body> </html> |
CSS
|
1 2 3 4 5 |
button { font-size: 14px; margin: 15px; padding: 0 15px; } |
Instead of attaching a click event handler to the form submit button, we should handle this in the submit event. The submit event fires whenever the user submits a form.
JS
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { $('form').submit(function() { $(this).find(':button[type=submit]').prop('disabled', true); // For this example, don't actually submit the form event.preventDefault(); }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html lang="en"> <body> <form> <p>Choose your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> </div> <div> <button type="submit">Submit</button> </div> </form> </body> </html> |
CSS
|
1 2 3 4 5 |
button { font-size: 14px; margin: 15px; padding: 0 15px; } |
Alternatively, you can disable the submit button using the onsubmit property in the HTML <form> element.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html lang="en"> <body> <form onsubmit="document.getElementById('submit').disabled=true; processFormData();"> <p>Choose your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> </div> <div> <button id="submit" type="submit">Submit</button> </div> </form> </body> </html> |
JS
|
1 2 3 4 5 |
processFormData = function() { console.log('Submitting form…'); // For this example, don't actually submit the form event.preventDefault(); }; |
CSS
|
1 2 3 4 5 |
button { font-size: 14px; margin: 15px; padding: 0 15px; } |
That’s all about disabling submit button on form submission in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)