Disable or Enable Submit Button using jQuery .prop() Method

This is a very common scenario, where you want to enable or disable the submit button or any button on a web page after you have entered some text or value in an input box. This feature is necessary, as it will ensure if the user has entered some values before submitting the data. I’ll show how you can easily enable or disable the submit button using jQuery.

You would find loads of information on this topic on the web. However, there was no post on this topic (before this one) here in my blog. This would help a beginner who came looking for a similar solution here.

Let’s assume, I have two input controls, one for entering text and other is for submission. By default, I would disable the “submit” button. When a user enters a text (value) in the input text box, it would automatically enable the button. However, if the user deletes the values in the text box, it would disable the submit button again.

The Markup and the Script

<html>
<head>
    <title>jQuery - Enable or Disable Button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <p>
        The button is disabled by default. To enable it, enter a value in the input box. 
        Delete (remove) the value in the box to disable the button again. 
        You can also copy and paste values to enable the button.
    </p>

    Name: <input type="text" id="tbName" />
    <input type="submit" id="submit" disabled="disabled" />
</body>

<script>
    $(document).ready(function () {
        $('#tbName').on('input change', function () {
            if ($(this).val() != '') {
                $('#submit').prop('disabled', false);
            }
            else {
                $('#submit').prop('disabled', true);
            }
        });
    });
</script>
</html>

Try it

In the markup section, I have set the disabled property of the submit button to disabled. You can set the property in the <script> section too, when the page loads. For example,

$(document).ready(function () {
    $('#submit').prop('disabled', true);   // SET THE PROPERTY AFTER THE PAGE HAS LOADED.
});

The jQuery .on() method will attach an event handler for the input element. The change event will check for entries in the input text box. It would react to text entered using the keyboard or if you copy and paste or cut any value in the box.

Later, I have set a condition to check if you have entered any value in the input text box. If text entered, set disabled property as false. I am using jQuery .prop() method to change the properties of the control.

Disable or Enable based on Multiple Input Text boxes

Now, let’s assume you have multiple <input> text controls on your web page and you have set a condition that all fields must have values (mandatory fields), before submitting the data. In the above script, I have attached the .on() method to a single input control using the id. To enable the method to listen to events of multiple input controls, you will need a slightly different approach.

First, add another input control along with the previous one in the markup section.

Name: <input type="text" id="tbName" />
Designation: <input type="text" id="tbDesig" />

In the script section, I have now attached the .on() method with :text option.

$(':text').on('input change', function () {
    $(':text').each(function () {
        if ($(this).val() == '') {
            $('#submit').prop('disabled', true);
            return false;
        }
        else {
            $('#submit').prop('disabled', false);
        }
    });
});

Now, irrespective of how many input boxes you add on your web page, the jQuery .on() method will listen and react to the changes of all input boxes. Similarly, if you have multiple submit buttons, you may replace the id with :submit option. For example,

if ($(this).val() != '') {
    $(':submit').prop('disabled', false)
}
else {
    $(':submit').prop('disabled', true)
}

Hope you find the examples useful here in this article. Let me know if you have any suggestions. Simply leave a message below.

← PreviousNext →