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.

CodePudding user response：

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" >

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Question is tagged [jQuery], so here's a (partially) jQuery answer involving a chain comprising:

• jQuery's $(selector, context)
• jQuery's .map() method
• jQuery's .get() method
• Array.prototype.reduce()

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()

1. Each sum as an individual variable :-

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

2. All sums in an array :-

    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)

3. All sums added together to make a grand-total :-

    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