Enable or Disable button programmatically using JavaScript

In this article, we will learn how we can programmatically enable or disable buttons using JavaScript.

The disabled property is a boolean attribute for HTML buttons that change the state of a button. If a button is disabled it’s usually represented as grey and unclickable.

<button type="button" disabled>Disable Button</button>

We can change the state of an HTML button using JavaScript, which helps us to make a button clickable and unclickable as per our requirements.

We can see the button state change programmatically in website forms. And depending of the validation of the form data, the button is enabled or disabled using JavaScript in the background.

Enable / Disable button using JavaScript

So, let’s see how it is done.

First, we have to select the element i.e button with an id (button), using document.querySelector(selectors) or document.getelementbyid.

const button = document.querySelector('button')

NOTE : If you have multiple buttons, then you can select all using document.querySelectorAll(selectors) or by tag name document.getElementsByTagName.

Once the element is selected, to disable the button, we have to set disabled to true.

button.disabled = true

And to enable the button back, we set the disabled property to false.

button.disabled = false

Example to change button state with JavaScript

Here an example with a form and a submit button, the submit button will be enabled programmatically when all the input fields in the form are filled.

Html Code:

<body>
    <h1>
      Enalble / Disable Button
      <form>
        <input id="inputname" type="text" placeholder="name" />
        <input id="inputemail" type="email" placeholder="email" />
        <button id="validation">Validate</button>
        <button id="submit">submit</button>
      </form>
    </h1>
    <script src="main.js"></script>
  </body>

JavaScript Code:

const validationBtn = document.getElementById("validation");
const submitBtn = document.getElementById("submit");
const name = document.getElementById("inputname");
const email = document.getElementById("inputemail");

submitBtn.disabled = true;

validationBtn.addEventListener("click", (e) => {
  e.preventDefault();
  if (name.value === "" || email.value === "") {
    submitBtn.disabled = true;
  } else {
    submitBtn.disabled = false;
  }
});

Here, we have two input fields, name, and email and two buttons, Validate and submit

Now, the submit button is disabled by default and it will get enabled if the input fields are not empty.

First, we have selected both the buttons by their ids and disabled the submit button on page load.

We have added an addEventListener() which will listen to a click event on the validation button.

We have targeted the input fields by their ids, inputname and inputemail.

The function inside the addEventListener(), has an if condition, name.value === "" || email.value === "", which checks if the value in the input field is empty or not.

Once we enter data into the input fields and click the validate button, the function will run the condition, if the condition is true i.e empty input field, the button will remain disabled. If no, then it will set the disabled property to false and the submit button will be enabled in Html.

Enable / Disable button using JavaScript

Example to change button state with JavaScript

Related Posts