Start New Discussion within our Web Development Community

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

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

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.

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.

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

This question has already been answered. Start a new discussion instead.