Count Dynamically created html elements with jquery

Question

I am counting the number of inputs on the current document that have value. It works fine, except for when I have dynamically added more inputs. I can't get there values.

For example I may have

<input id="participant-1"/>
<input id="participant-2"/>
...

Dynamically created after button click

<input id="participant-15" />

I'll get the value of each one in a for loop like

for(var i =1 ; i <25; i++)
{
  ...$('input#participant-' + i).val();
}

Now when I run a for loop to check the value of each one of these inputs it only gets the values of the inputs that weren't dynamically created. I have looked at the other questions on here and I still can't see how to apply something like .on() to what I am trying to accomplish.

NEW FOLLOW UP QUESTION ok, now I think this is where I need more clarification concerning how to use the .on.

I have a jsfiddle here: JsFiddle example

where I create new elements and on blur of all text boxes I would like to calculate how many of the elements have value and log it. Now it currently will respond from blur event with elements who were static. It doesn't work for dynamically created elements

If you have the element id you don't need to add an html tag before. So $('#participant-' + i) is better. — Ricardo Lohmann
– Ricardo Lohmann, Commented Dec 19, 2012 at 3:27
The examples you have and the code should work just fine.. please add more of the code. How you create the duplicates, when you request the values etc. a jsfiddle would be great.. — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 19, 2012 at 3:27
How do you get the 25 ? Change it by $("input[id^='participant-']").length — Bali Balo
– Bali Balo, Commented Dec 19, 2012 at 3:31

Akhil Sekharan · Accepted Answer · 2012-12-19 05:48:25Z

8

Give it a common class:

<input class="textbox" id="participant-1"/>
<input class="textbox" id="participant-2"/>

And get it like:

var values = [];
$('.textbox').each(function(){
    values.push($(this).val());
});
console.log(values)

And to answer the edit:

The Syntax should be : $(container_selector).on(event_type, target_selector, callback)

JSFiddle Demo

$('.name').on('blur', 'input', calculate_total);

edited Dec 19, 2012 at 5:48

answered Dec 19, 2012 at 3:27

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

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

5 Comments

Akhil Sekharan Over a year ago

Would be better than searching the dom for $('#participant-' + i).val() many times

Akhil Sekharan Over a year ago

OP mentioned about counting Dynamically created elements, but he never show the part he is binding the event. So could't help on that part.

Abdullah Rasheed Over a year ago

accepting because taught me something about efficiency and made it more readable.

Abdullah Rasheed Over a year ago

Please see updated Question i have added jsfiddle with follow up question

Andy Over a year ago

I had to use console.log(values.length) to get an actually number, but the solution totally works for my application!

mcolley73 · Accepted Answer · 2012-12-19 04:20:57Z

3

Could also consider the use of the CSS attribute selector.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

    $("input[id|=participant]").each(function(){
            // something
    });

answered Dec 19, 2012 at 4:20

mcolley73

916 bronze badges

1 Comment

Abdullah Rasheed Over a year ago

Please see updated Question i have added jsfiddle with follow up question

nodsdorf · Accepted Answer · 2014-11-25 20:07:27Z

-3

Using a class selector will save time here.

<input id="participant-1" class="participant"/>
<input id="participant-2" class="participant"/>

Then use a simple count call...

var count = $('.participant').length
alert ('You have ' + count + ' Counted Inputs');
//result is 2

Hope you find this useful

answered Nov 25, 2014 at 20:07

nodsdorf

2331 gold badge4 silver badges17 bronze badges

1 Comment

Ghazaleh Javaheri Over a year ago

it's not dynamic and does not change if we add other input via js

Collectives™ on Stack Overflow

Count Dynamically created html elements with jquery

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related