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 the 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

In this tutorial, you have learned how to disable submit button until all fields have values. If you have any query, feel free to ask in the comment section.