How to fix sum of multiple input fields if same class in one not

Question

I can't sum on table td "jumlah" for "total"

<script>
$(document).on("change", ".jumlah", function() {
    var sum = 0;
    $(".jumlah").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});
</script>

<input type="text" id="total" class="total" value=""  />

I expect the output for total from jumlah enter image description here

Add some `console.log()`'s and diagnose the issue. Is the function being fired? Is sum being added up correctly? — Blue, May 24 '19 at 01:46
And AFAIK, you need to use the `input` event handler: https://stackoverflow.com/a/1411296/4875631 — Blue, May 24 '19 at 01:48
i don't think `onchange` is the appropriate event handler, shouldn't you use `keyup` on that? — Kevin, May 24 '19 at 01:49
Please don't ask the [same question twice](https://stackoverflow.com/questions/56285425/cant-sum-on-table-td-this-code-javascript-how-to-fix) — freefaller, May 24 '19 at 07:11

zer00ne · Answer 1 · 2019-05-24T10:31:39.903

Elements with the [contenteditable] attribute will not have a [value] attribute because:

Only non-interactive, non-void, flow and phrase elements like <div></div>, <section></section>, <spab></span> etc. can have [contenteditable].
Only form controls such as <input>, <textarea>, <output>, etc. can have the [value] attribute.

So instead of .val() use .text() since text is the content between the tags of non-form controls. The important change is a ternary:

if this is an input get its value otherwise get its text

sum += $(this).is('input') ? +$(this).val() : +$(this).text();

The minor changes are:

input event instead of change because it looks slick.
The form is registered to the input event instead of document.

$('.totals').on("input", ".subtotal", function() {
  let sum = 0;
  $(".subtotal").each(function(){
    sum += $(this).is('input') ? +$(this).val() : +$(this).text();
  });
  $(".total").val(sum);
});

:root {font:700 16px/1.2 Consolas}
input, output, data {display:inline-block;font:inherit;text-align:right;width:125px;}
output, data {width:50px}
data {outline:1px solid #aaa;padding:2px 17px 2px 0px;margin:1px 0px 1px 2px;width:110px}

<form class='totals'>
  <table>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td>Total: <output class="total">0</output></td></tr>
  </table>
 </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ali Elkhateeb · Answer 2 · 2019-05-24T03:42:14.083

I have created a very simple example with what you need, I think you can easily implement something similar in your code.

$('.jumlah').on('input', function() {
  let elementsToSum = $(document).find('.jumlah');
  let sum = 0;
  for (let ele of elementsToSum) {
    // Parse the value of the <td> to integer
    let eleIntValue = parseInt($(ele).html());
    if (!isNaN(eleIntValue)) {
      // Only add it to the sum if it is a number (not empty)
      sum += eleIntValue;
    }
  }
  
  // Change the value of <input> with the new calculated sum
  $('#total').val(sum);
});

td {
  width: 50px;
}

<table border="1">
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
</table>

<br>
<input type="text" id="total" class="total" value="" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to fix sum of multiple input fields if same class in one not

2 Answers2

Linked