AndrewFerrara AndrewFerrara - 2 years ago 93
Javascript Question

Disabling submit button until all fields have values

I want to disable my submit button until all the fields have values..
how can I do that?

<style type="text/css">
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$('#register').attr("disabled", true);
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" 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" />
<div id="test">

Answer Source

Check out this jsfiddle


// note the change... I set the disabled property right away
<input type="submit" id="register" value="Register" disabled="disabled" />


(function() {
    $('form > input').keyup(function() {

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

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to
        } else {
            $('#register').removeAttr('disabled'); // updated according to

The nice thing about this is that it doesn't matter how many input fields you have in your form, it will always keep the button disabled if there is at least 1 that is empty. It also checks emptiness on the .keyup() which I think makes it more convenient for usability.

I hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download