1,105,447 Community Members

Enable/disable submit button

Member Avatar
NoUserNameHere
Light Poster
48 posts since Mar 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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');
        }
     });
});
Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

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.');
     }
});
Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
0
 

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.

Member Avatar
NoUserNameHere
Light Poster
48 posts since Mar 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
0
 

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

Member Avatar
NoUserNameHere
Light Poster
48 posts since Mar 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I understand now. Thank you!

Question Answered as of 1 Year Ago by gon1387 and stbuchok
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article