Javascript calculate values with multiple inputs not working

Question

I'm trying to calculate values of multiple inputs. Here is my code.

var sum = 0;
$('.total_t').each(function() {
  sum += parseFloat(this.value);
});
$('#debtor_t_o_debtors').val(sum.toFixed(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="numeric total_t" value="12,584,436.86" type="text">
<input class="numeric total_t" value="558,718.60" type="text">
<input class="numeric total_t" value="9,013.25" type="text">
<input class="numeric total_t" value="0.00" type="text">

<input class="numeric" value="" type="text" id="debtor_t_o_debtors">

But unfortunately I'm getting 579 as answer which wrong. It would be great help if someone can tell what's the error here.

Remove the commas, either in the HTML or before parsing the number as float: sum += parseFloat(this.value.replace(/,/g, "")); — user5734311
– user5734311, Commented Jan 23, 2020 at 8:17

CertainPerformance · Accepted Answer · 2020-01-23 08:18:59Z

Your values contain commas, and parseFloat stops parsing when a comma is found.

Replace each comma with the empty string first:

var sum = 0;
$('.total_t').each(function() {
  sum += parseFloat(this.value.replace(/,/g, ''));
});
$('#debtor_t_o_debtors').val(
  sum.toFixed(2)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="numeric total_t" value="12,584,436.86" type="text">
<input class="numeric total_t" value="558,718.60" type="text">
<input class="numeric total_t" value="9,013.25" type="text">
<input class="numeric total_t" value="0.00" type="text">

<br>
<input class="numeric" value="" type="text" id="debtor_t_o_debtors">

To add commas to the result after adding, use a regular expression to lookahead for 3, 6, 9, etc digit characters, followed by a .:

var sum = 0;
$('.total_t').each(function() {
  sum += parseFloat(this.value.replace(/,/g, ''));
});
$('#debtor_t_o_debtors').val(
  sum
    .toFixed(2)
    .replace(/(?!^)(?=(?:\d{3})+\.)/g, ',')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="numeric total_t" value="12,584,436.86" type="text">
<input class="numeric total_t" value="558,718.60" type="text">
<input class="numeric total_t" value="9,013.25" type="text">
<input class="numeric total_t" value="0.00" type="text">

<br>
<input class="numeric" value="" type="text" id="debtor_t_o_debtors">

Amit Chauhan · Accepted Answer · 2020-01-23 08:18:14Z

1

Problem is with , in your input fields, remove it you will get correct total.

var sum = 0;
$('.total_t').each(function () {
    console.log(parseFloat(this.value), this.value);
    sum += parseFloat(this.value);
});
$('#debtor_t_o_debtors').val(sum.toFixed(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="numeric total_t"  value="12584436.86" type="text">
<input class="numeric total_t"  value="558718.60" type="text">
<input class="numeric total_t"  value="9013.25" type="text">
<input class="numeric total_t"  value="0.00" type="text">
<input class="numeric" value="" type="text" id="debtor_t_o_debtors">

answered Jan 23, 2020 at 8:18

Amit Chauhan

7,0092 gold badges26 silver badges39 bronze badges

Comments

Ranjit Singh · Accepted Answer · 2020-01-23 08:24:46Z

1

Replace all the character other than digit and dot with empty

var sum = 0;
$('.total_t').each(function() {
  sum += parseFloat(this.value.replace(/[^\d\.\-]/g, ""));
});
$('#debtor_t_o_debtors').val(
  sum.toFixed(2)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="numeric total_t" value="12,584,436.86" type="text">
<input class="numeric total_t" value="558,718.60" type="text">
<input class="numeric total_t" value="9,013.25" type="text">
<input class="numeric total_t" value="0.00" type="text">

<br>
<input class="numeric" value="" type="text" id="debtor_t_o_debtors">

answered Jan 23, 2020 at 8:24

Ranjit Singh

3,7351 gold badge23 silver badges36 bronze badges

Comments

Muhammad Haseeb · Accepted Answer · 2020-01-23 08:37:15Z

0

Your input value contains comma you first need to remove the comma and then you can add comma again into the result if you need.

var sum = 0;
        $('.total_t').each(function() {
          sum += parseFloat(this.value.replace(/,/g, ''));
        });
        $('#debtor_t_o_debtors').val(
          sum.toFixed(2).toLocaleString()
        );

answered Jan 23, 2020 at 8:37

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Javascript calculate values with multiple inputs not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related