jQuery — Enable or Disable Button

How to Enable and Disable Buttons with JavaScript (Based on State)

Learn how to disable or enable buttons based on whether or not an input field is empty.

When you fill out forms on the web you’ll notice that often you cannot submit the form until all or some text fields are filled (required fields). The same principle applies to checkboxes and radio buttons.

Here’s how to control the state of your button (enabled vs disabled) based on whether or not your input field is empty.

Add the following HTML to your editor:

input class="input" type="text" placeholder="fill me" /> button class="button">Click Mebutton>

Add the following JavaScript

let input = document.querySelector(".input") let button = document.querySelector(".button") button.disabled = true input.addEventListener("change", stateHandle) function stateHandle()  if (document.querySelector(".input").value === "")  button.disabled = true > else  button.disabled = false > >

Now you have a button that is disabled as long as your input field is empty, and enabled as soon as you start filling it.

Check out the demo with all the working code.

How the HTML & JavaScript code works

First, we define a couple of HTML elements, an input field, and a button. Then we use JavaScript to create two variables to store a reference to each element input & button . Now we have full control to manipulate each element programmatically.

We start by disabling the state of the button. By default, a button’s state is enabled in HTML. By using disabled = true the button is now grayed out (disabled) in the UI for the user.

Then we attach an event handler ( addEventListener ) to the input variable with the event property change , which is a property that listens (watches) for interactions with elements. In this case, we want to know when the user interacts with the input field by typing inside it, and then react to that event by running a function.

The function we run is called stateHandler and it fires every time there’s a change inside the input field.

The code inside the stateHandler says “if the value of the input field is an empty string ( === » ) then disable the button, otherwise ( else ) enable it.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

How to disable or enable buttons using javascript and jquery

Learn how to enable or disable buttons using javascript and jQuery based on whether the input field is filled or empty.

If you are a beginner or not very familiar with javascript or jQuery, we recommend that you go through the entire article. However, if you are just looking for the code, click here!

Table of Contents

Introduction to disabling/enabling buttons

Often while filling out web forms have you noticed how the submit button just won’t work unless we have filled all the required fields?

This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.

Do you wish to implement such a feature on your web form too? Read on!

Before diving into the code let us first look at the logic behind toggling between different states of the button.

Logic behind toggling between disabled and enabled states of buttons

• Set button to disabled state in the beginning
• If the input value of the required field is empty, let the button remain disabled. (Disabled state = TRUE)
• If the input value of the required field is not empty, change the state of the button to enabled. (Or set disabled state = FALSE)

Below, we are going to see how to disable/enable a button with one required text field implemented using Javascript and jQuery.

Code Implementation for changing the state of the button

1. Using Javascript

A) HTML

Add the following HTML Code to your editor

//defining button and input field  

Code Explanation

Using the above code we have defined two HTML elements namely an input text field and a button.

B) Javascript Code

//Program to disable or enable a button using javascript  

Code Explanation

1. Now, using javascript we store a reference to each element, namely input, and button.

2. By default a button’s state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.

3. Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.

4. Here we use the change property to monitor when the user types text inside the input field and run a function accordingly.

5. The function we run here is called the stateHandle() that gets activated every time there is a change in the status of the input field.

6. The function compares the value of the input field (the text field) with an empty string.

7. If the user has not typed anything, then the text field will be equal ( === ) to the empty string and the button will remain disabled (disabled = true).

8. If the user inputs text in the input field, then the button will get enabled (disabled = false).

Complete Code

Output

A) Inactive State

The button is disabled as the text field is empty

B) Active State

The button is enabled as the text field is not empty

Using jQuery to enable/disable a button

     Name:     

1. For the jQuery method too, we start by creating an HTML button and text field (submit and tbName respectively) and setting the button to disabled state initially.

2. Here the ready() function is used to make the function available once the document has been loaded.

3. The .on() method in jquery attaches the event handler to the input field (tbName).

4. The change event will check for changes in the input field and run the function accordingly.

5. Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled.

6. Here the .prop() method is used to change the state of the button.

Visualization

You can play around with the above code using this editor and see which part of the code does what. You can also try out different CSS options for the button etc.

Источник

How to disable or enable buttons using javascript and jQuery?

Let us learn how to enable or disable buttons using javascript and jQuery based on whether the input field is filled or empty. If you are a beginner or not very familiar with javascript or jQuery, we recommend that you go through the entire article. However, if you are just looking for the code, click here!

Table of Contents

Introduction to disabling/enabling buttons

Often while filling out web forms have you noticed how the submit button just won’t work unless we have filled all the required fields?

This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.

Do you wish to implement such a feature on your web form too? Read on!

Before diving into the code let us first look at the logic behind toggling between different states of the button.

Logic behind toggling between disabled and enabled states of buttons

• Set button to disabled state in the beginning
• If the input value of the required field is empty, let the button remain disabled. (Disabled state = TRUE)
• If the input value of the required field is not empty, change the state of the button to enabled. (Or set disabled state = FALSE).

Below, we are going to see how to disable/enable a button with one required text field implemented using Javascript and jQuery.

Code Implementation for changing the state of the button

1. Using Javascript

A) HTML

Add the following HTML Code to your editor

//defining button and input field Click Me 

Code Explanation

Using the above code we have defined two HTML elements namely an input text field and a button.

B) Javascript Code

//Program to disable or enable a button using javascript  

Code Explanation

1. Now, using javascript we store a reference to each element, namely input, and button.
2. By default a button’s state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.
3. Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.
4. Here we use the change property to monitor when the user types text inside the input field and run a function accordingly.
5. The function we run here is called the stateHandle() that gets activated every time there is a change in the status of the input field.
6. The function compares the value of the input field (the text field) with an empty string.
7. If the user has not typed anything, then the text field will be equal ( === ) to the empty string and the button will remain disabled (disabled = true).
8. If the user inputs text in the input field, then the button will get enabled (disabled = false).

Complete Code

   Click Me    

Output

A) Inactive State

The button is disabled as the text field is empty

B) Active State

The button is enabled as the text field is not empty

Using jQuery to enable/disable a button

     Name:     

1. For the jQuery method too, we start by creating an HTML button and text field (submit and tbName respectively) and setting the button to disabled state initially.
2. Here the ready() function is used to make the function available once the document has been loaded. 3. The .on() method in jquery attaches the event handler to the input field (tbName).
3. The change event will check for changes in the input field and run the function accordingly.
4. Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled.
5. Here the .prop() method is used to change the state of the button.

Visualization

You can play around with the above code using this editor and see which part of the code does what. You can also try out different CSS options for the button etc.

Источник