Manipulating Submit Button using JavaScript

In this tutorial, we will see how to enable the submit button only when all the input fields are filled. The page will contain many input fields and a submit button. Initially, the submit button will be disabled. But when the input fields are filled, then the button should be enabled. This is an alternate way to make sure that all the required fields are entered before submitting the form.

Page having only one required input field

Here we will have only one input field, and a submit button.

HTML code

This is a simple HTML page having only one input tag and a submit button. You can notice that the submit button by default, is disabled. Upon clicking the button, function clickme() is called.

<html>
<head>
    <title>Enable or Disable Button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h2>Enabling and Disabling Submit Button!!</h2> <br>
    <p>
        This program focuses on enabling the submit button only when all the input <br> are entered. Else the button is disabled.
    </p>
    <br> First Name : <input type="text" id="fname" /><br> <br>
    <br><br>
    <input type="submit" id="submit" disabled="disabled" onclick="clickme()" />
</body>
</html>

JavaScript code

Here we use the on() method to attach an event to detect the input change. If a change is detected, we retrieve the value entered in the input field and check whether is empty or not. If it empty, then we disable the submit button using the prop() method, else we enable it.

function clickme() {
    alert('All fields are Entered. Form submitted!!');
}
$(document).ready(function() {
    $('#fname').on('input change', function() {
        if ($(this).val() != '') {
            $('#submit').prop('disabled', false);
        } else {
            $('#submit').prop('disabled', true);
         }
    });
});

 

Page having more than one required field

Here we will have more than one input field and a submit button. And the button will be enabled only when all the fields are entered.

HTML code

The page contains 3 input fields namely first name, last name, and city name. It has a submit button which by default is disabled. Upon clicking the button, it calls a method called clickme().

<html>
<head>
    <title>Enable or Disable Button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h2>Enabling and Disabling Submit Button!!</h2> <br>
    <p>
        This program focuses on enabling the submit button only when all the input <br> are entered. Else the button is disabled.
    </p>
    <br> First Name : <input type="text" id="fname" /><br><br> 
         Last Name : <input type="text" id="lname" /><br><br> 
         City Name : <input type="text" id="city" /><br><br>
    <br><br>
        <input type="submit" id="submit" disabled="disabled" onclick="clickme()" />
</body>
</html>

JavaScript code

Like we did earlier, here also we on() method to attach an event to detect the input change. We also use a dictionary of having each input fields as keys and 0 (initially) or 1 as values. We check each and every input field, whether the value is entered or not, and each time, we update its appropriate value in the dictionary to 0 if not entered and 1 if entered. Then we use a loop to check if all the values in the dictionary are 1, meaning all fields are entered. If yes, then we enable the submit button, else disable it.

function clickme() {
    alert('All fields are Entered. Form submitted!!');
}
$(document).ready(function() {
    var check = {
        'fname': 0,
        'lname': 0,
        'city': 0
    };
    $('#fname').on('input change', function() {
        if ($(this).val() != '') {
            check['fname'] = 1;
        } else {
            check['fname'] = 0;
        }
        var status = 1;
        for (var i in check) {
            if (check[i] == 0) {
                status = 0;
            }
        }
        if (status == 1) {
            $('#submit').prop('disabled', false);
        } else {
            $('#submit').prop('disabled', true);
        }

    });
    $('#lname').on('input change', function() {
        if ($(this).val() != '') {
            check['lname'] = 1;

        } else {
            check['lname'] = 0;

        }
        var status = 1;
        for (var i in check) {
            if (check[i] == 0) {
                status = 0;
            }
        }
        if (status == 1) {
            $('#submit').prop('disabled', false);
        } else {
            $('#submit').prop('disabled', true);
        }
    });
    $('#city').on('input change', function() {
        if ($(this).val() != '') {
            check['city'] = 1;

        } else {
            check['city'] = 0;

        }
        var status = 1;
        for (var i in check) {
            if (check[i] == 0) {
                status = 0;
            }
        }
        if (status == 1) {
            $('#submit').prop('disabled', false);
        } else {
            $('#submit').prop('disabled', true);
        }
    });
});

 

Please post your comments, doubts, queries in the comment box. Happy Learning 🙂

Also, read

Leave a Reply

Your email address will not be published. Required fields are marked *