currently I have
var cost = document.getElementsByName('blog_linkm_one[]');
for (var i = 0; i < cost.length; i++) {
sum += parseFloat(cost[i].value);
}
This function gives me sum of all text box name as blog_linkm_one[] and it is working.
Now I want to filter it out.
I have some different classes like appending_div0, appending_div1, appending_div2 and all those classes have textboxes name sd blog_linkm_one[].
What I want is to get sum of relevant blog_linkm_one[] as per their particular class.
For example
class appending_div0 has 3 text box blog_linkm_one[]. And their value is 1, 2, 3, So their sum has to be 6
class appending_div1 has 5 text box blog_linkm_one[]. And their value is 1, 2, 3, 5, 9 So their sum has to be 20.
one of the possible answers ...
const cls = ['appending_div0','appending_div1','appending_div2']
let sum = { any:0 }
document.querySelectorAll('input[name="blog_linkm_one[]"]').forEach(el=>
{
sum.any += parseFloat(el.value)
cls.forEach(cl=>
{
if (el.classList.contains(cl))
{
sum[cl] = (sum[cl] ?? 0) + parseFloat(el.value)
}
})
})
console.log( sum )<input type="text" name="blog_linkm_one[]" class="" value="10000" >
<input type="text" name="blog_linkm_one[]" class="appending_div0" value="1" >
<input type="text" name="blog_linkm_one[]" class="appending_div0" value="2" >
<input type="text" name="blog_linkm_one[]" class="appending_div0" value="3" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="1" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="2" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="3" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="5" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="9" >
<input type="text" name="blog_linkm_one[]" class="appending_div2" value="4" >
<input type="text" name="blog_linkm_one[]" class="appending_div2" value="5" >
<input type="text" name="blog_linkm_one[]" class="appending_div2" value="6" >
<input type="text" name="blog_linkm_one[]" class="" value="20000" >Question is tagged [jQuery], so here's a (partially) jQuery answer involving a chain comprising:
Here's your basic utility :-
function filterAndSummate(elements, className) {
return $(`.${className}`, elements) // filter
.map((i, element) => parseFloat($(element).val())) // map filtered elements to values
.get() // convert jQuery object to Array
.reduce((x, value) => x + value, 0); // summate the values
}
Now three ways in which you might want to call filterAndSummate()
var costElements = document.getElementsByName('blog_linkm_one[]');
let cost_1 = filterAndSummate(costElements, 'appending_div0');
let cost_2 = filterAndSummate(costElements, 'appending_div1');
let cost_3 = filterAndSummate(costElements, 'appending_div2');
var costElements = document.getElementsByName('blog_linkm_one[]');
let costs = ['appending_div0', 'appending_div1', 'appending_div2'] // array of classNames
.map(className => filterAndSummate(costElements, className)); // map to array of costs (one per className)
var costElements = document.getElementsByName('blog_linkm_one[]');
let grand_total = ['appending_div0', 'appending_div1', 'appending_div2'] // array of classNames
.map(className => filterAndSummate(costElements, className)) // map to array of costs (one per className)
.reduce((x, c) => x + c, 0); // summate all the costs to get a grand-total