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.

Syntax

submitObject.disabled

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 Post: How to disable the Submit 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
<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.

Also Read: 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.

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 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" 
        onchange="manage(this)" /></p>
    Designation: <input type="text" id="desig" placeholder="Enter designation" 
        onchange="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.

Thanks for reading.

Previous - How to Print a PDF Document using JavaScriptNext - How to Get All Textboxes in a Form 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: