Enable or Disable button programmatically using JavaScript


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

The disabled property is a boolean attribute for HTML buttons which change the state of a button. If a button is disabled its usually represented as grey and unclickable.

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

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

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

Enable / Disable button using JavaScript

So, lets 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 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 enable 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 the 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 its ids, inputname and inputemail.

The function inside the addEventListener(), have an if condition, name.value === "" || email.value === "", which checks if the value in the input field are 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 disabled to false and the submit button will be enable in Html.

Related Topics:

Copy text from an HTML to clipboard using JavaScript


💾 Recommended Articles