Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Disable Submit Button Until all Fields have Values?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 10.1k
    Comment on it

    To make the submit button disable until all the fields have some values, we will be using keyup() function that provide handler to check not null values.

    We disabled the register button in the starting and according to the value from handler, we are retaining or removing the disabled property from submit button.

     

    Let's see the Example:

     

    index.html

    <form>
        Username<br />
        <input type="text" id="user" name="user" /><br />
        Password<br />
        <input type="password" id="pass" name="pass" /><br />
    
        <input type="submit" id="register" value="Register" disabled="disabled" />
    </form>

     

    abc.js

    (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');
        }
    });
    })()

     

    Hope this helps you :)

    For any questions or doubt please ask in comments section below.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: