I have my form broken up into sections, and I'm trying to have a script check the number of fields empty in each section. Previously I had written an array with the id's of each section and had it cycle through that array, but i'd like to find a more universal solution that doesn't depend on predefined data.

at first I was trying .find() like so

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section).find('input');
    $.each(inputs, function(){
        if(this.val() == '') { totblank++; );
    }

when that didn't work i tried .serializeArray()

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section + ' input').serializeArray();
    $.each(inputs, function(i, field) {
        if (field.value == '') { totblank++; }
    });

and it gets followed up with

    if(totblank > 0){
        $("#"+section+"B").html(totblank+" Empty");
    } else {
        $("#"+section+"B").html("All full!");
    }       
}

section is the id of a div, the div has a table with form inputs.

This is my first time using these functions so I'm not really sure where I'm going wrong. Feels like I'm expecting the output to be something its not.

I have my form broken up into sections, and I'm trying to have a script check the number of fields empty in each section. Previously I had written an array with the id's of each section and had it cycle through that array, but i'd like to find a more universal solution that doesn't depend on predefined data.

at first I was trying .find() like so

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section).find('input');
    $.each(inputs, function(){
        if(this.val() == '') { totblank++; );
    }

when that didn't work i tried .serializeArray()

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section + ' input').serializeArray();
    $.each(inputs, function(i, field) {
        if (field.value == '') { totblank++; }
    });

and it gets followed up with

    if(totblank > 0){
        $("#"+section+"B").html(totblank+" Empty");
    } else {
        $("#"+section+"B").html("All full!");
    }       
}

section is the id of a div, the div has a table with form inputs.

This is my first time using these functions so I'm not really sure where I'm going wrong. Feels like I'm expecting the output to be something its not.

• javascript
• jquery
• forms
• input

• Is "+= totblank" valid syntax? – Tx3 Commented Apr 21, 2011 at 10:22
• @Tx3, Just going to ask the same thing. I've never seen that before and doesn't seem, at first glance, to be valid. w3schools./js/js_operators.asp – Dutchie432 Commented Apr 21, 2011 at 10:24
• oops, you're right it should be totblank++. I also forgot to set it. updated. – sicks Commented Apr 21, 2011 at 10:26

6 Answers 6

There are a few syntax errors in your code. Fixed:

function blankFields(section){
   var totblank = 0;
   var inputs = $('#' + section).find('input');
   inputs.each(function(){
      if($(this).val() == '') totblank++;
   });

   alert(totblank); 
}

I think you can try to find all empty fields, and browse back the DOM to retrieve the parent section.

After, store results in associative array like "section" => count. If the section isn't in array, add an entry "newsection" => 1, else if section is in, increment section's count.

I think this part should give you an error

+= totblank

Or maybe I don't know JavaScript syntax well enough..

Anyway, try this instead

totblank++;

Overall, it's also good to make sure you're really dealing with Numbers. Common mistake is to get .val() and do some maths for example '1' + 1. Result is 11 and is something you probably didn't want

Wrote a little snippet that does the trick : http://jsfiddle/9jdmH/

$('#check').click(function() {
    $('.section').each(function() {
        checkSection($(this));
    });
})

function checkSection(section) {
    //assuming we're getting a jquery object. easily modifieable
    section.find('input[type="text"]').each(function() {
        if ($(this).val() == '') {
            $('#log').prepend('<p>Found an empty input section ' + section.index() + '</p>');
        }
    })
}

This will work for a general markup type.

You'll need to make some changes depending on what kind of information you want. I haven't used IDs so I'm just using the .index() point out which ones are empty. As long as you get/make a jquery reference in the checkSection method you'll be fine.

My take on this: http://jsfiddle/fqBrS/

function findNumberOfEmptyInputs(section) {
    var inputs = $('#'+section+' input[type="text"]');
    alert(inputs.filter(":empty").length);

}
findNumberOfEmptyInputs("section2");

The good thing is that you do not have to (explictly at least) use a loop. Comments appreciated :)

code with sample. Should give pretty much the same output you have now.

<html>
<head>
    <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        function checkBlank(f){
            $(f).find(".section").each(function () {
                var c = $(this).find("input[value='']").size()
                $("#" + $(this).attr("id") + "B").text(c ? c + " Empty" : "All full");
            })
            return false
        }
    </script>
</head>

<body>
    <form onsubmit="return checkBlank(this)">
        <div class="section" id="section1">
            <input type="text">
            <input type="text">
        </div>
        <div class="section" id="section2">
            <input type="text">
            <input type="text">
        </div>

        <input type="submit" value="Click">
    </form>

    <div id="section1B"></div>
    <div id="section2B"></div>
</body>
</html>