Disable or Enable Submit Button using JavaScript disabled Property

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

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;
        }
    }

// 	Using ES6 feature.
// 	let manage = (txt) => { 
//     	let 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.

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.

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'); 

        // Loop through each element.
        for (i = 0; i < ele.length; i++) {

            // Check the element type
            if (ele[i].type == 'text' && ele[i].value == '') {
                bt.disabled = true;    // Disable the button.
                return false;
            }
            else {
                bt.disabled = false;   // Enable the button.
            }
        }
    }    
</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.

← PreviousNext →