jQuery — Enable or Disable Button

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.

Источник

Enable/Disable Input fields Using JavaScript

While creating a form or a questionnaire, there is a requirement to prompt the user at a certain point while filling in an input field. For instance, limiting the number of characters within a field i.e. “Contact No”. In addition to that, for applying a prerequisite condition to fill a particular field, etc. In such case scenarios, enabling/disabling input fields in JavaScript is a very convenient approach for both the developer and user’s end.

This tutorial will explain the approaches to enable/disable input fields using JavaScript.

How to Enable/Disable Input Fields Using JavaScript?

To enable/disable input fields using JavaScript, the following approaches can be utilized in combination with the “disabled” property:

Approach 1: Enable/Disable Input Fields Using JavaScript Using onclick Event

An “onclick” event is used to redirect to the specified function. This event can be applied to invoke the corresponding function for enabling and disabling input fields upon the button click.

Example

Let’s have a look at the below-stated example:

< h2 >Enable / Disable Text Field

In the above-stated code, perform the following steps:

• Include an input “text” field having the specified “id” and “placeholder” values.
• Also, create two separate buttons with attached “onclick” events redirecting to two different functions for enabling and disabling the input fields respectively.

Let’s continue to the JavaScript part of the code:

let get = document. getElementById ( «input» )

let get = document. getElementById ( «input» )

In the above code snippet, perform the following steps:

• Declare a function named “disableField()”.
• In its definition, access the created input field by its “id” using the “document.getElementById()” method
• In the next step, apply the “disabled” property and assign it the boolean value “true”. This will result in disabling the input field upon the button click.
• Similarly, define a function named “enableField()”.
• In its definition, similarly, repeat the step discussed for accessing the input field.
• Here, assign the “disabled” property as “false”. This will result in enabling the disabled input field.

In the above output, it can be observed that the input field is disabled and enabled properly upon the corresponding button click.

Approach 2: Enable/Disable Input Fields Using JavaScript Using addEventListener() Method

The “addEventListener()” method is used to attach an event to the element. This method can be implemented to disable and enable an input field based on the attached event and the specified “key”.

• “event” refers to the name of the event.
• “function” points to the function to execute.
• “use” is the optional parameter.

Example

Let’s observe the below-stated example:

< h2 >Enable / Disable Text Field

In the above lines of code:

• Include the stated heading.
• In the next step, repeat the method discussed in the previous approach for including an input field having the specified “id” and “placeholder” values.

Let’s move on to the JavaScript part of the code:

let get = document. getElementById ( «input» )

get. addEventListener ( «keydown» , ( e ) => {

In the above code snippet, perform the following steps:

• Access the input field by its “id” using the “document.getElementById()” method.
• In the next step, apply the “addEventListener()” method and attach an event named “keydown”.
• In the further code, assign the “disabled” property as “false” for enabling the input field.
• Lastly, in the “else” condition, allocate the “disabled” property as “true” for disabling the enabled input field upon pressing the “Enter” key.

From the above output, it is evident that the input field becomes disabled upon pressing the “Enter” key.

Conclusion

The “disabled” property in combination with the “onclick” event or the “addEventListener()” method can be applied to enable/disable input fields using JavaScript. The former approach can be utilized to redirect to the corresponding function to enable/disable the input field upon the button click. The latter approach can be implemented to perform the required functionality based on the attached event and the specified “key”. This article explains how to enable/disable input fields in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.

Источник

How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla

Sajal Soni Last updated Jul 19, 2021

In this article, we’ll discuss how you can enable or disable a button with JavaScript. First, we’ll go through how it works in vanilla JavaScript, and later on we’ll see how to do it with jQuery.

JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development.

When you’re working with JavaScript, more often than not you need to enable or disable a button based on some actions. Usually, when you’re working with forms, you want to keep the submit button disabled until a user fills all the mandatory fields in a form. Once a user fills all the mandatory fields, you would like to automatically enable it so that the user can click on a button to submit the form.

In HTML, a button element has its own state, and thus, you can keep it either enabled or disabled. For example, when a form is loaded, you can keep a button in the disabled state. Later on, you can enable it with the help of JavaScript.

Today, we’ll discuss how you can enable or disable a button with JavaScript with a couple of real-world examples.

Enable or Disable a Button With Vanilla JavaScript

In this section, we’ll discuss a real-world example, which demonstrates how you can enable or disable a button with vanilla JavaScript.

Let’s go through the following example.

Источник