How to Enable and Disable Button Javascript

In this tutorial we will show you how to enable or disable a javascript button.

Introduction

On the Web, forms are often used for the user to enter information. Most of the time, you will be able to submit a form only when in the form the fields are filled in (For example when you want to register on a website the email address field is required). The HTML buttons is one of the few HTML elements to have its own state.

Depending on the fields entered in the form, it may be interesting to disable or enable the HTML button using the programming language Javascript.

In the rest of this tutorial, we will see how to do this change of state.

HTML button

The first thing to do is to create the button in HTML.

Add this HTML code in your editor to create the button.

<input class="input" type="text" placeholder="Insert your text" />
<button class="button">Submit</button>

Here is the result you will get :

By default, the HTML button is enabled. To disable it we must use Javascript.

Enable / Disable Button Javascript

Here we want the HTML button to be activated only when the text field is filled in. First we need to select both elements using the document.querySelector() function :

// create two variables input and button

let input = document.querySelector(".input")
let button = document.querySelector(".button")

Note : We can use the Javascript function document.getElementById() instead of document.querySelector()

We created two JavaScript variables to store the references of each of these two elements. We can now manipulate each element in our Javascript code.

By default, we want to disable the HTML button. The syntax for doing so is as follows:

# Syntax 

buttonObject.disabled = true|false

By taking our button variable, we can then apply the disabled property :

// disabled property

button.disabled = true

Now we just have to change the state of the button according to the entered text.

Add this Javascript function:

// Complete code 

let input = document.querySelector(".input")
let button = document.querySelector(".button")

button.disabled = true

input.addEventListener("change", swapState)

function swapState() 
{
  if (document.querySelector(".input").value === "") 
  {
    button.disabled = true
  } else {
    button.disabled = false
  }
}

The result is as follows:

We use an event manager called addEventListener that will listen to the interactions with the different elements of our HTML (with the change event property ). We define a function called swapState() that will be called at each state change on our HTML input element. In this function, we perform a test to see if the string in the input field is empty or not. If it is empty then we disable the button, otherwise we enable it.

Browser Support

The disabled property is available in most browsers:

Conclusion

The disabled property allows us to easily enable or disable an HTML button in Javascript. I hope that with this tutorial your knowledge of Javascript has increased. Feel free to tell me in comments if you have problems using the disabled property, I would be happy to answer !

If you are a novice in Javascript, I advise you to read this book it explains clearly the basics to know about Javascript.

To keep the site up and running I make a profit on eligible purchases on these items (As a partner of Amazon).

See you soon!

Back to the hardware page