How to enable button in javascript

Question

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

Table of Contents Show

How the HTML & JavaScript code works
Disable or Enable Submit Button on Multiple Text Boxes
How do I enable a button?
How do you get a button to work in JavaScript?
How do I enable a button after disabling?
How do I activate a button in HTML?

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.

HTML

Add the following HTML to your editor:

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

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.

Demo 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.

You can use JavaScript disabled property to disable or enable a submit button, or an input button, on your web page. Here in this post I am sharing a simple example showing how to disable or enable a submit button based on certain condition.

Syntax

submitObject.disabled

The JavaScript disabled property is a boolean property that takes a true or false. Setting the property to true will enable the button (clickable) and setting it false (like bt.disabled = false;) will disable the button (un-clickable).

How to disable a button after the 1st click using a one-line code in JavaScript

Here’s what I am doing. I have two elements on my web page. A text box and a submit button. By default the submit button remains disabled. I’ll use the Input element’s disabled property to set it disabled (or un-clickable). When a user enters a value in the textbox, the script will enable (clickable) the submit button, else if the textbox is empty it will again disable the button.

The Markup and Script

<html>
<body>
    <input type="text" id="txt" onkeyup="manage(this)" />
    <input type="submit" id="btSubmit" disabled />
</body>
<script>
    function manage(txt) {
        var bt = document.getElementById('btSubmit');
        if (txt.value != '') {
            bt.disabled = false;
        }
        else {
            bt.disabled = true;
        }
    }


</script>
</html>

Try it

You can apply the same (above) script on an Input element of type button. For example,

<input type="button" id="btSubmit" value="Submit" disabled />

The same script will work with the submit button as well as with the input button.

How to disable or enable a Submit Button using a simple jQuery Method

Disable or Enable Submit Button on Multiple Text Boxes

You can apply the above method on a form with multiple textboxes, that is you can disable or enable the submit button after making sure that all the fields (inputs) have values.

I’ll use the JavaScript disabled property in the script, inside a loop checking the type of input fields and also after checking the fields have values.

Disable or Enable Checkbox Depending upon Dropdown Selection using JavaScript and jQuery

Now, I have two input boxes calling a function using the onchange event.

The Code

<html>
<head>
    <title>Enable/Disable Submit Button based on Multiple Textbox values</title>
</head>
<body>    
    <p>Enter some values in the text to Enable the Submit button!</p>

    <p>Name: <input type="text" id="name" placeholder="Enter your name" 
        onkeyup="manage(this)" /></p>
    Designation: <input type="text" id="desig" placeholder="Enter designation" 
        onkeyup="manage(this)" />

    <input type="submit" id="submit" disabled />
</body>

<script>
    function manage(txt) {
        var bt = document.getElementById('submit');
        var ele = document.getElementsByTagName('input'); 

        
        for (i = 0; i < ele.length; i++) {

            
            if (ele[i].type == 'text' && ele[i].value == '') {
                bt.disabled = true;    
                return false;
            }
            else {
                bt.disabled = false;   
            }
        }
    }    
</script>
</html>

Try it

You can add more textboxes in your web page and check the code. Every time you add some text in the respective fields and switch focus on another field, it will raise the event onchange and call the function manage. This is where it will check if the textboxes have values or not and accordingly disable or enable the submit button.

Thanks for reading. ☺

← PreviousNext →

How do I enable a button?

Find out how to programmatically disable or enable a button using JavaScript.

const button = document. querySelector('button').

button. disabled = true..

button. disabled = false..

How do you get a button to work in JavaScript?

How to create a button in Javascript.

Use a createElement command. Call the "document.createElement("button")" command. ... .

Assign a string. Once you assign your variable name and call your "createElement" command, you can assign a string to the code. ... .

Append the button to the tag. ... .

Assign the onclick property. ... .

Check functionality..

How do I enable a button after disabling?

Using Javascript.

Disabling a html button document. getElementById("Button"). disabled = true;.

Enabling a html button document. getElementById("Button"). disabled = false;.

Demo Here..

How do I activate a button in HTML?

The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.). That is not possible with a button created with the <input> element!

kode javascript Unclickable button javascript Usestate disable button Element disabled js