Count Dynamically created html elements with jquery
Solution 1
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)
$('.name').on('blur', 'input', calculate_total);
Solution 2
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
});
Abdullah Rasheed
Why I spent 500 Bounty points on One SO Question: Youtube Video. Passionate Full Stack Javascript developer. I hope to continue to cultivate Javascript skills and knowledge, by learning from the best and contributing to the community. Favorite Books on Javascript: Effecitve Javascript Javascript: The Good Parts Javascript: The Definitive Guide Eloquent Javascript Javascript Patterns
Updated on June 16, 2022Comments
-
Abdullah Rasheed almost 2 years
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
-
Akhil Sekharan over 11 yearsWould be better than searching the dom for $('#participant-' + i).val() many times
-
Akhil Sekharan over 11 yearsOP 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 11 yearsaccepting because taught me something about efficiency and made it more readable.
-
Abdullah Rasheed over 11 yearsPlease see updated Question i have added jsfiddle with follow up question
-
Abdullah Rasheed over 11 yearsPlease see updated Question i have added jsfiddle with follow up question
-
Abdullah Rasheed over 11 yearsThanks Alot! Works Perfectly Now!
-
Andy over 7 yearsI had to use console.log(values.length) to get an actually number, but the solution totally works for my application!