Disable or Enable Submit Button using JavaScript disabled Property

You can use the 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.



The JavaScript disabled property is a Boolean property that takes a value as true or false. Setting the property to true will enable the button (clickable) and setting it false will disable the button (un-clickable).

Related: How to Disable or Enable Submit Button using jQuery .prop() Method

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
<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled />
The Script
    function manage(txt) {
        var bt = document.getElementById('btSubmit');
        if (txt.value != '') {
            bt.disabled = false;
        else {
            bt.disabled = true;

Try it Yourself

You can now try the above script on an Input box 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.

Also Read: Disable or Enable Submit Button using jQuery .prop() 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.

Related Article: 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 Markup and GridView
Name: <input type="text" id="name" onchange="manage(this)" />
Designation: <input type="text" id="desig" onchange="manage(this)" />

<input type="submit" id="submit" disabled />
The Script
    function manage(txt) {
        var bt = document.getElementById('submit');
        var ele = document.getElementsByTagName('input');         // GET ALL ELEMENTS OF TYPE INPUT.

        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.

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.

Previous - How to Print a PDF Document using JavaScript

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts:

Join our Google Plus Community and be a part of a discussion!