Loop Through Formset To Sum Values - JQuery

Question

I have a Django Form Set where each form has an amount with class = amount2. Each time a change is made to any one of these inputs with that class I would like to re-total the value of all inputs with class amount2. Currently I am trying this

$('.amount2').on("input", function() {
  var sum = 0
  $('.amount2').each(function() {
    sum += $(this).val();
    console.log(sum)
  })
})

when I log sum I get 0 despite the fact that I am entering 5 in the input. So I tried to dial it back a bit and do this

$('.amount2').on("input", function() {
  var sum = 0
  $('.amount2').each(function() {
    sum += 10;
    console.log(sum)
  })
})

That log returns prints the number 10 as I would expect when I make one input and 20 on the next.

So what is going wrong with my first bit?

UPDATED

  {% for form in formset.forms %}
                
                  {% csrf_token %}
                  
                      {% with url_name=request.resolver_match.url_name %}
                      {% if url_name == 'EditQuoteView' %}
                        

                      {% endif %}
                      {% endwith %}
                      {{form.id}}
                    
                    
                      {{form.ProductCode}}
                      {{form.DescriptionOfGoods}}
                      {{form.UnitQty}}
                      {{form.Type}}
                      {{form.Price}}
                      {{form.Amount}} {{form.DELETE}}
                  
                
              {% endfor %}

user_383904 · Answer

Input, textarea, select, or contenteditable value is always a String. (Even if the InputElement has the HTML attribute type="number"). Remember to always handle conversion before doing math.

Use parseInt(val, 10), parseFloat(val), Number(val), or BigInt(val) etc. to convert a string to Integer, Float or Number

const $amount2 = $('.amount2');

$amount2.on("input", function() {
  let sum = 0
  $amount2.each(function() {
    sum += Number(this.value);
  });
  $("#amount2-sum").text(sum);
});

Additionally for fun you could use jQuery's .get(), JS's .Array.prototype.reduce() and the unary + to coerce a String to Number

const $amount2 = $('.amount2');

$amount2.on("input", function() {
  const sum = $amount2.get().reduce((sum, el) => sum + +el.value, 0);
  $("#amount2-sum").text(sum);
});

Loop Through Formset To Sum Values - JQuery

1 Answers