Enable/disable submit button

[NoUserNameHere]

Hi, I'm trying to enable a submit button only when all the input fields are filled. Is this the correct way of checking to see if an input field is empty?

$(document).ready(function() {
     $('#submit_button').attr('disabled', 'disabled');

     $.each(':input', function() {
        if ($(this).val() != "") {
            $('#submit_button').removeAttr('disabled');
        }
     });
});

[stbuchok]

Yes, however if any of the fields are not empty, this will validate and set the submit button to be enabled.

Try something like this instead.

$(document).ready(function() {
     $('#submit_button').attr('disabled', 'disabled');

     var isValid = true;

     $.each(':input', function() {
        if ($(this).val() == "") {
            isValid = false;

            break;
        }
     });

     if(isValid){
        $('#submit_button').removeAttr('disabled');
     }
     else{
        alert('You have empty fields.');
     }
});

[gon1387]

Hi NoUserNameHere,
Yes, $(this).val() != "" this is a correct way on how to check if the value is empty in jQuery.

It seems you have a problem with your each. Should it be this instead?

$.each($(':input'), function() {
    if ($(this).val() != "") {
        $('#submit_button').removeAttr('disabled');
    }
});

The code you provided,$.each(':input', function() {, will just iterate over the ':input' string.

[NoUserNameHere]

Tried the mentioned methods that were posted above and the submit button remained enabled for some reason. Hmm, can't figure out why its doing that.

[gon1387]

The issue with the code is, wheneever there's an input which was set not to have any value at all, the #submit_button just won't be enable.
You can add a class for checking what input element should be checked.Here's an example.
Your HTML:

<form>
<input type="text" class="checkThis" name="input1" id="input1" value="" />
<input type="text" name="input2" id="input2" value="" />
<input type="text" class="checkThis" name="input3" id="input3" value="" />
<input type="text" class="checkThis" name="input4" id="input4" value="" />
<input type="text" name="input5" id="input5" value="" />
<input id="submit_button" type="submit" value="sub" />
<form>

Your Javascript:

$(document).ready(function() {
     $('#submit_button').attr('disabled', 'disabled');

     //Attach an on change event handler to all input
     // with a checkThis class
     $('input.checkThis').on('change',function(){
        //employing also stbuchoks technique
        var hasEmptyInput = false;

        //check each input for empty value
        $('input.checkThis').each(function(){

            //breakout from 'each' if there was an empty value
            // cause there not much to do, since we proved there was an
            // empty value
            if ($(this).val() == "") {
                hasEmptyInput = true;
                return false;
            }
        });

        // Great!! all has value
        if(!hasEmptyInput){
            $('#submit_button').removeAttr('disabled');
        // OH, snap! There's an empty input again
        } else {
            $('#submit_button').attr('disabled', 'disabled');
        }
     });
});

Here's the JSFIDDLE EXAMPLE: JS FIDDLE EXAMPLE LINK

[NoUserNameHere]

I understand now. Thank you!