Using jQuery to count all inputs nested in div

Question

I have a setup basically like this:

<div id="container">
    <div class="field_shell">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="field">
    </div> 
    <div class="field_shell">
        <label for="age">Age</label>
        <input type="text" name="age" id="name" class="field"> 
    </div>
</div>

Except on a larger scale, there are three sets of #container, each #container holding several (and varying amounts of) div.field_shell elements. Most div.field_shell hold only one input, but a few do hold two separate input elements.

My issue is how I can count the number of input elements in each #content. Bonus points for giving some insight on the best method of checking if each input in each #container div is filled, and returning specific results if so.

I assume .length is viable here, but I am stumped. Especially on checking the "status" of each #container (by status, I mean if each input within that #container is filled, and not empty).

Thank you guys so much for reading through, and thank you more for helping :)

You might have gotten the length of the input element, which is 0 if unfilled. — quik_silv
– quik_silv, Commented Jan 30, 2014 at 7:39

quik_silv · Accepted Answer · 2014-01-30 07:37:48Z

6

I'm assuming you want to use jQuery, I've changed your HTML code a bit to make it work. Ids should be unique.

<div id="container">
    <div class="field_shell">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="field"/>
    </div>
    <div class="field_shell">
        <label for="age">Age</label>
        <input type="text" name="age" id="age" class="field"/>
    </div>
</div>

and the jQuery code to count for each #container, It will traverse the DOM tree and return all elements that match input

var inputs = $("#container").find($("input") );
console.log(inputs.length)

If you want to check for filled input elements, you can look at the element.length property. To count for multiple containers, you could run a loop to handle each #container and nest the code above in it.

answered Jan 30, 2014 at 7:37

quik_silv

2,4272 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anoop Joshi P · Accepted Answer · 2014-01-30 07:26:40Z

0

try this code,

    <script>
    $(document).ready(function () {
        var FieldShellelements = $("#container .field_shell");
        for (i = 0; i < FieldShellelements.length; i++) {
            alert($(FieldShellelements[i]).children('input').length);
        }
    });
</script>

answered Jan 30, 2014 at 7:26

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

P.Sethuraman · Accepted Answer · 2014-01-30 07:38:03Z

0

Demo FIDDLE

I hope this is what you want

HTML

    <div id="container">

 <div class="field_shell">

   <label for="name">Name</label>
   <input type="text" name="name" id="name" value="demo" class="field">

 </div>

 <div class="field_shell">

   <label for="age">Age</label>
   <input type="text" name="age" id="name" class="field">

 </div>

</div>

Jquery

    var count=0;
$('#container').find('input[type="text"]').each(function(){
    if ($.trim($(this).val()).length) {
        count+=1
        alert("Filled Value="+$(this).val());
    }
});
alert("Total Input Count="+$('#container').find('input[type="text"]').length+"//Filled Inputs Count="+count);

answered Jan 30, 2014 at 7:38

P.Sethuraman

7153 silver badges5 bronze badges

Comments

Tim · Accepted Answer · 2014-01-30 07:45:51Z

You should try to keeps IDs unique on a page, since $("#container") will only ever match the first instance (whereas $("[id='container']") will pick up all of them).

// Gather all containers that have all inputs filled
var allInputsFilled = $("[id='container']").filter(function () {
        var allFilled = true,
            inputs = $(this).find("input");

        inputs.each(function () {
            // !val() equates to true when the value is empty
            // '' is a falsy value, inverted with ! not operator
            if (!$(this).val()) {
                allFilled = false;
                return false; // break out of loop early
            }
        });

        return allFilled; 
    });

allInputsFilled will contain all #container divs that have all their inputs filled. Demo.

Collectives™ on Stack Overflow

Using jQuery to count all inputs nested in div

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related