jQuery — Enable or Disable Button

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.

Источник

Hide button in javascript function

Last updated: Jan 11, 2023
Reading time · 3 min

# Hide a Button after clicking it using JavaScript

To hide a button after clicking it:

1. Add a click event listener to the button.
2. Each time the button is clicked set its style.display property to none .
3. When the display property is set to none , the element is removed from the DOM.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="box" style=" height: 100px; width: 100px; background-color: salmon; display: none; " > Box div> button id="btn">Click mebutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  // 👇️ hide button btn.style.display = 'none'; // 👇️ show div const box = document.getElementById('box'); box.style.display = 'block'; >); 

We added a click event listener to the button, so a function is invoked every time it’s clicked.

Each time the button is clicked, its display property is set to none to hide it.

The last line in the example sets the display property of a div to block to show it after hiding the button.

If you click on the button, you’ll see the button disappear and the div get shown.

We set the button’s display CSS property to none to hide it.

# Hide a Button after clicking it using visibility

However, you might need the visibility property depending on your use case.

When an element’s display property is set to none , the element is removed from the DOM and does not affect the layout. The document is rendered as though the element doesn’t exist.

On the other hand, when an element’s visibility property is set to hidden , it still takes up space on the page, but the element is invisible (not drawn).

The element still affects the layout on the page as normal.

Here is an example that uses the visibility property to hide a button after clicking it and to show a div element.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> div id="box" style=" height: 100px; width: 100px; background-color: salmon; visibility: hidden; " > Box div> button id="btn">Click mebutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  // 👇️ hide button (still takes up space on page) btn.style.visibility = 'hidden'; // 👇️ show div const box = document.getElementById('box'); box.style.visibility = 'visible'; >); 

If you refresh the page, you’ll see that the button still takes up space, but is invisible.

This is the difference between setting visibility to hidden and display to none .

This behavior might be better if you’re looking to avoid shifting the layout of the page which might be confusing to users.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Hide or Show an Element after a few Seconds in JavaScript
• Hide Element(s) by Class using JavaScript
• Hide/Show an Element by ID using JavaScript
• Hide element when clicked outside using JavaScript
• Show/Hide an element on Radio button Selection using JS
• Show/Hide a Form on button click using JavaScript
• Detect if the Browser is in fullscreen mode in JavaScript
• How to set the Filename of a Blob in JavaScript
• An invalid form control with name=’X’ is not focusable
• Prevent a button from submitting the form using JavaScript
• onclick not working in JavaScript or React.js [Solved]

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to Hide Button in JavaScript

While developing a website, there can be a situation where it is required to click a button only once. For instance, you are submitting a form or entering any sensitive information restricted for modifications or revisions. In such scenarios, hiding buttons using JavaScript becomes very handy to ensure the privacy of the information.

This blog will explain the methods to hide buttons in JavaScript.

How to Hide Button in JavaScript?

To hide a button in JavaScript, the following methods can be utilized:

The mentioned approaches will now be discussed one by one!

Method 1: Hide Button in JavaScript Using “style.visibility” Property

The “style.visibility” property sets the visibility of an element. This property can be utilized to hide the visibility of the predefined button by referring to its “id”.

Here, the visibility of the specified “Object” is set as “hidden”.

Check out the following demonstration for a better understanding.

Example

First, create a button using the input tag, assign it a value named “Click_Me”, and include an onclick which will trigger the “hideButton()” function when the added button is clicked:

In the JavaScript file, define the hideButton() function in such a way that it invokes the “document.getElementsById()” to access the created button and set its visibility as “hidden”:

document. getElementById ( ‘btn’ ) . style . visibility = ‘hidden’ ;

The output of the above program is shown as follows:

Method 2: Hide Button in JavaScript Using “style.display” Property

The “style.display” property sets the specified element’s display type. This technique can be implemented to hide the created button by fetching its specified id and setting “none” as its display type.

Here, the display property of the “Object” is set as “none”.

Go through the following example for demonstration.

Example

We will utilize the same HTML code in this example. However, in the JavaScript file, we will define the “hideButton()” function which will be invoked when the button is clicked. In its definition, the “document.getElementById()” method will fetch the button using its “btn” id and the value of its “style.display” property will be set as “none” in order to hide it:

document. getElementById ( ‘btn’ ) . style . display = ‘none’ ;

We have offered the simplest methods to hide buttons in JavaScript.

Conclusion

To hide a button in JavaScript, you can utilize the “style.visibility” and “style.display” properties. To do so, firstly, you have to fetch the button by specifying its id in the document.getElementbyId() method and then set the value of the style.visibility property as hidden, or none for the style.display property. This manual discussed the method related to hiding buttons in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник