Disable button if a input field is empty in JavaScript

In this tutorial, we are going to learn about how to disable the button if a input field is empty in JavaScript.

Consider, that we have a following input field and button element in our HTML:

<input id="search" placeholder="Search" />
<button id="btn" disabled>Search</button>

To disable the button if a input field is empty in JavaScript:

1. First, we need to access the input field and button element inside the JavaScript using the document.getElementById() method.

2. Now, add a keyup eventListener to the input field.

3. Inside the keyup eventListener, we can disable or enable the button dynamically if a input field has a data or not.

Here is an example:

<input id="search" placeholder="Search" />
<button id="btn" disabled>Search</button>

const inputField = document.getElementById("search");
const btn = document.getElementById("btn");

inputField.addEventListener("keyup", ()=>{
   // disabling the button if a input field value is empty
     if(inputField.value.trim() === "") {
          btn.disabled = true;
        } else {
          // enabling the button
          btn.disabled = false;
     }
})

In the example above, we first accessed the input field and button element in the JavaScript. Inside the keyup eventListener we are using the ‘if’ condition to check if a input field value is empty or not.

if it’s empty, we are disabling the button by passing a value true to the ‘btn.disabled’ property. Otherwise, we are enabling the button using btn.disabled = false