Auto add amount with decimal value in javascript

Question

I want to appear in (total amount) automatically the sum of (Amount Paid and OtherCharges) how can I do that?

I'm getting incorrect value in total amount, let say

Amount Paid = 100.90

Other Charges = 10.1

Total Amount = 100.91

here's my code

 $('#AmountPaid, #OtherCharges, #Amount').on('input',function() {

    var AmountPaid = parseFloat($('#AmountPaid').val()).toFixed(2);
    var OtherCharges = parseFloat($('#OtherCharges').val()).toFixed(2);
    var Amount =  parseFloat($('#Amount').val()).toFixed(2);  


    $('#Amount').val(parseFloat(AmountPaid + OtherCharges)).toFixed(2);

    });

});

score 3 · Answer 1 · edited May 23 '17 at 11:45

toFixed turns your number back into a string. When you + two strings together, you get a concatenated string, like 100.9010.1. Then you're parseFloating that, which will disregard the invalid part and give you 100.901, which you're toFixed'ing, which rounds. I'm not sure why you'd get 100.91 for your inputs (I get 100.90), but fundamentally those are the issues.

The solution is to pay close attention to when you're dealing with strings vs. numbers. Also, you probably don't want to hook input on your output field (#Amount), just your input fields.

So:

$('#AmountPaid, #OtherCharges').on('input', function() {
    var AmountPaid = parseFloat($('#AmountPaid').val());
    var OtherCharges = parseFloat($('#OtherCharges').val());
    var Amount =  AmountPaid + OtherCharges;

    $('#Amount').val(Amount.toFixed(2));
});

Live Example:

$('#AmountPaid, #OtherCharges').on('input', function() {
  var AmountPaid = parseFloat($('#AmountPaid').val());
  var OtherCharges = parseFloat($('#OtherCharges').val());
  var Amount = AmountPaid + OtherCharges;

  $('#Amount').val(Amount.toFixed(2));
});

<p>Fill in either of the first two fields, and the third is updated:</p>
<label>
  Amount paid:
  <input type="text" id="AmountPaid" value="100.90">
</label>
<label>
  Other charges:
  <input type="text" id="OtherCharges" value="">
</label>
<label>
  Amount:
  <input type="text" id="Amount" value="">
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

And a general caveat around using JavaScript's numbers for financial calculations: Is floating point math broken?

Auto add amount with decimal value in javascript

1 Answers1