How Get Total Sum from Input Box Values Using JavaScript

auto calculate the sum of input values with javascript

In jQuery something like this should work with a few assumptions:

$('.toAdd').live('change', function() {
  var total = 0;

  $('.toAdd').each(function () {
    total += $(this).val();
  });

  $('#total').val(total);
});

The assumptions being that your input fields all have the class 'toAdd' and that your final input field has an ID of 'total'.

In pure JS:

var elems = document.getElementsByClassName('toAdd');

var myLength = elems.length,
total = 0;

for (var i = 0; i < myLength; ++i) {
  total += elems[i].value;
}

document.getElementById('total').value = total;

How to get total sum from input values with Javascript?

You need to declare total variables outside of your event.

`var debitTotal = 0.0, creditTotal = 0.0;`

you are also converting too many times when trying to get the total it's unnecessary, you can just add floats. Remove the .toFixed(2) from money = parseFloat(money).toFixed(2). toFixed(2) turns your value into a string. Also remove the for loop. All you need is:

var money = document.querySelector('input[type="number"]').value;
money = parseFloat(money);
debitTotal += money;

to get your total. Then to display the total you can add .toFixed(2);

document.querySelector('.right > .total.debits').innerHTML = '$' + debitTotal.toFixed(2);

I did basically the same thing for credits.

Here is the updated jsfiddle.

Sum values of input fields with same name and display them individually

Working fiddle.

First of all the id attribute should be unique in the same document so you could use the common classes instead like :

<input type="hidden" name="09-15-2017[]" class="dateprice" value="1">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="3">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="4">
<input type="hidden" name="09-15-2017[]" class="dateprice" value="5">

Then you could use an object to store the some using the name of inputs as key like :

var inps = document.querySelectorAll('.dateprice');
var totals = {};

//Sum calculation
for (var i = 0; i <inps.length; i++)
{
  totals[inps[i].name] = (totals[inps[i].name] || 0) + Number(inps[i].value);
}

//Result display
for (var key in totals) {
  if (totals.hasOwnProperty(key)) {
    console.log("Total amount on " + key + " is " + totals[key]);
  }
}

NOTE : You coudle remove the brackets [ ] from the output using replace() like :

console.log("Total amount on " + key.replace('[]','') + " is " + totals[key]);

Hope this helps.

var inps = document.querySelectorAll('.dateprice');var totals = {};
//Sum calculationfor (var i = 0; i <inps.length; i++){  totals[inps[i].name] = (totals[inps[i].name] || 0) + Number(inps[i].value);}
//Result displayfor (var key in totals) {  if (totals.hasOwnProperty(key)) {    console.log("Total amount on " + key + " is " + totals[key]);  }}

<input type="hidden" name="09-15-2017[]" class="dateprice" value="1"><input type="hidden" name="09-13-2017[]" class="dateprice" value="3"><input type="hidden" name="09-13-2017[]" class="dateprice" value="4"><input type="hidden" name="09-15-2017[]" class="dateprice" value="5">