Get my latest tutorials

by Sai gowtham

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

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY