Disable a Button in JavaScript
May 25, 2020
In JavaScript, button elements have a disabled property that you can set to prevent clicking on the button.
For example, suppose you have a button that shows an alert when you click it:
<button id="my-alert-button">Show Alert</button>
<script>
document.querySelector('#my-alert-button').addEventListener('click', function() {
alert('Clicked on button!');
});
</script>Here's a live version of the above button.
If you set a disabled property on the button, clicking the button
won't do anything.
<button id="my-alert-button">Disabled Button</button>
<script>
document.querySelector('#my-alert-button').addEventListener('click', function() {
alert('Clicked on button!');
});
// Now clicking on the button won't do anything
document.querySelector('#my-alert-button').disabled = true;
</script>With Forms
Buttons can also be used to submit forms.
For example, clicking on the below button triggers a 'submit' event
on my-form. Hitting the "enter" key while the text input has focus
also submits the form.
<form id="my-form">
<input type="text" placeholder="Sample Input">
<button type="submit">Submit Form</button>
</form>
<script>
document.querySelector('#my-form').addEventListener('submit', function(ev) {
ev.preventDefault();
alert('Form submitted!');
});
</script>However, if you disable the button, you also disable submitting the form.
Note that you don't get a 'submit' event on my-form below when you
click on the button, nor when you hit "enter" while the text input has focus.
<form id="my-form">
<input type="text" placeholder="Sample Input">
<button type="submit">Submit Form</button>
</form>
<script>
document.querySelector('#my-form').addEventListener('submit', function(ev) {
ev.preventDefault();
alert('Form submitted!');
});
document.querySelector('#my-form button').disabled = true;
</script>
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!