CODEWITHSUNDEEP
javascriptjqueryformsinput
sicks
sicks

Reputation: 767

Get the values of input fields within child elements of a specific div

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.

Upvotes: 1

Views: 3935

Answers (6)

potatopeelings
potatopeelings

Reputation: 41065

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>

Upvotes: 0

Uku Loskit
Uku Loskit

Reputation: 42040

My take on this: http://jsfiddle.net/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 :)

Upvotes: 0

DarthJDG
DarthJDG

Reputation: 16591

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

Upvotes: 5

JohnP
JohnP

Reputation: 50019

Wrote a little snippet that does the trick : http://jsfiddle.net/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.

Upvotes: 0

Tx3
Tx3

Reputation: 6916

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

Upvotes: 0

Elorfin
Elorfin

Reputation: 2497

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.

Upvotes: 0

Related Questions