How to Disable a Button if Input Field is Empty in JavaScript?

In JavaScript, it is often necessary to disable a button if an input field is empty, or if it does not contain any text or content.

It can be useful in a variety of situations, such as when you want to prevent users from submitting a form if the required fields are not filled out, or when you want to prevent users from clicking on a button if the correct data is not entered in the input field.

In this article, we will discuss different ways to disable and enable the button based on the text entered inside the input field. Let’s get started.

1. Using the disabled Attribute

The most commonly used approach to disable a button in JavaScript is to use the disabled attribute. The disabled attribute is a boolean attribute that lets you know whether the button is disabled or not.

If the value of the disabled attribute is set to true, it means the button is disabled, otherwise, the button is enabled. We will use this concept to make the button disabled or enabled.

Let’s say we have a text input and a submit button in our HTML file:

<div>
    <input type="text" id="myInput" placeholder="Enter Something" autocomplete="off">
    <button id="myBtn">Submit</button>
</div>

We want to keep the submit button disabled if there is no text inside the input field i.e. the input is empty. Otherwise, we want to keep the button enabled.

To do this, we have to add an event listener to the input field on the keyup event. Inside the event listener, we have to keep track of the value of the input field. If its value is an empty string(''), we will set the button’s disabled attribute to true, otherwise, we will set it to false.

See the implementation in the below example:

let input = document.getElementById('myInput');
let button = document.getElementById('myBtn');

button.disabled = true;   // Make button disabled initially

input.addEventListener('keyup', function(event){
   
   let val = event.target.value;  // input's current value
   
   if(val===''){
       button.disabled = true;  // Make button disabled
   }
   else{
       button.disabled = false;  // Make button enabled 
   }
   
});

This will give you the following output:

Code Explanation:

In the above example, we first get the input and button element using the getElementById() method of the DOM. Next, we make the button disabled by default as there is no text inside the input initially.

We then attached a keyup event listener to the input element. This event listener fires every time the user presses a key and releases it. This helps us in getting the current value of the input field every time the user types something.

Inside the event listener, we are checking if the text inside the input field is empty or not. If it is empty, we make the button disabled by setting the disabled attribute to true, if it’s not, we make the button enabled by setting the disabled attribute to false.

2. Using the classList Property

Another way to make a button disabled is to add a .disabled class to the button if the input field is empty and remove it from the button if it’s not.

To add and remove a class dynamically from an element, we can use the classList property of the DOM. The classList property has various built-in methods such as add(), remove(), toggle(), etc. which can be used to add, remove and toggle a CSS class respectively.

Let’s say we have the below input and button in our HTML:

<div>
    <input type="text" id="myInput" placeholder="Enter Something" autocomplete="off">
    <button id="myBtn" class="disabled">Submit</button>
</div>

Add the below .disabled class to your CSS file:

.disabled{
    pointer-events: none;
    opacity: 0.6;
}

Add the below code to the js file:

let input = document.getElementById('myInput');
    let button = document.getElementById('myBtn');
    
    input.addEventListener('keyup', function(event){
       
       let val = event.target.value;  // input's current value
       
       if(val===''){
           button.classList.add('disabled')  // Add .disabled class
       }
       else{
           button.classList.remove('disabled');  // Remove .disabld class 
       }
       
    });

This will give you the following output:

Code Explanation:

In this example, we have defined a CSS class .disabled. Inside the .disabled class, we have set the pointer-events property to none.

When we set the pointer-events property to none, all mouse events such as hover, click, mouse enter, mouse leave, etc. become disabled for that element.

We initially added the .disabled class to the <button> because the input is empty at that moment.

In the JS file, we first get the reference to the input and button using the getElementById() method of the DOM. Next, we added an event listener to the input element on keyup event. It will get fired every time the user types something in the input box.

Inside the event listener, we check if the input is empty, if yes, add the .disabled class to the button using the classList.add() method. If not, remove the existing .disabled class from the button.

3. Using the setAttribute() Method

One more way to make the button disabled whenever the input is empty is to use the setAttribute() method.

The setAttribute() method takes two parameters, first the name of the attribute and second, the value of the attribute.

setAttribute(attributeName, attributeValue);

In our example, the attribute name is ‘disabled’ and we have to set it to true or false according to our requirement.

The following example shows how you can make a button disabled whenver the input is empty:

let input = document.getElementById('myInput');
let button = document.getElementById('myBtn');

button.setAttribute('disabled', true);  // Make disable initially

input.addEventListener('keyup', function(event){
   
   let val = event.target.value;  // input's current value
   
   if(val===''){
        button.setAttribute('disabled', true);  // Set disabled attribute
   }
   else{
       button.removeAttribute('disabled');  // Remove disabled attribute 
   }
   
});

In this example, we add the disabled attribute to the button and set its value to true if the input field is empty.

If the input field isn’t empty, we remove the disabled attribute from the button using the removeAttribute() method.

Conclusion

In this article, we learned three different ways to make a button disabled whenever the input field is empty.

The first approach is to use the disabled attribute. The disabled attribute is a boolean attribute that lets you make a button disabled or enabled by setting its value to true or false.

The second approach is to use the classList property of the DOM. In this approach we create a custom .disabled class by setting the pointer-events property to none and add or remove it from the button using the classList.add() or classList.remove() methods.

In the third approach, we use the setAttribute() and removeAttribute() methods to add and remove the disabled attribute from the button.

Thanks for reading.