How To Disable Submit Button Until A Form Is Filled

How To Disable Submit Button Until A Form Is Filled

If you trying to disable a submit button until a form is filled then you can do this easily using jQuery.

With help of jQuery you can disable a submit button until last text field is filled out and after that button is enabled to submit a form data.

Demo

HTML

<form>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="password" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="password" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />     
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

jQuery

<script>
$(document).ready(function() {
    $('form > input').keyup(function() {

        var empty = false;

        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
});
</script>

Read Also: How to Get Value of Div Content Using jQuery

Leave a Reply

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