jQuery Form Calculation - Works, but strange results

Question

I have a form with inputs laid out correctly using ID's etc. I have deployed a little jQuery function to calculate the form variables. In essence I want to calculate the total VAT and then the Grand Total.

The code example was taken from http://forum.jquery.com/topic/calculation-on-form-fields and that works OK. However I the multiplication/division works for the VAT but the addition gives some very strange results.

Example data input:
siteFee = 3000
qty = 1
vat = 20

The VAT function (a * b * c) /100 calculates OK and gives 600 which would be correct however the grandTotal comes out at 3000611.6659999999999 which doesn't make a lot of sense. It looks like it's trying to concatenate the values together rather than adding them together, but then again that's not really occurring either!.

jQuery Code:

<script>
         $(document).ready(function() {
           function compute() {
                  var a = $('#siteFee').val();
                  var b = $('#qty').val();
                  var c = $('#vat').val();
                  var d = $('#incVAT').val();
                  var totalVAT = (a * b * c) / 100;
                  var grandTotal = a + d;

                    $('#incVAT').val(totalVAT);
                    $('#total').val(grandTotal);

                }

                $('#siteFee, #qty, #siteFeeID, #vat').change(compute);
         });
    </script>

Note that #siteFeeID is just another form variable where I do an Ajax pull to get the correct values for #siteFee so that shouldn't really matter, but thought I would mention it.

Any pointers would be wonderful.

Cheers Nick

score 2 · Accepted Answer · answered Aug 28 '13 at 09:55

2

Try using parseFloat() or parseInt() functions whle performing calculations in javascript becasue + is the opertaor for concatanation in javascript

So var grandTotal = parseFloat(a) + parseFloat(d);

answered Aug 28 '13 at 09:55

웃웃웃웃웃

11,829
15
59
91

I'd like to thank you as well as @iBlue and Arun P Johny as this seems to have gotten me a little further. That would make sense and it seems to have given me some more meaningful data. The minor issue now is that the grandTotal isn't giving the correct answer. I have split out the two calculations into separate scripts to get some clear lines of separation in the code. Could you advise on the `change` event? Do I need to have all of the fields that could alter in there or just one or two pertinent ones? – Nick Green Aug 28 '13 at 10:21
Also, the result has more than 2 decimal places. Could I integrate a "rounding" function into the outputs? For example `$('#total').val(grandTotal),2;` . I know that won't work, but presume there is something similar. I will go and have a look, but thought I would throw it into this question as it would be applicable for others who will review this post later on. – Nick Green Aug 28 '13 at 10:26
for rounding you can use floor method in javascript – 웃웃웃웃웃 Aug 28 '13 at 10:29
I've got that working now. I used `$("#total").val(grandTotal.toFixed(2));` which rounds up. Thanks for your help however, much appreciated. – Nick Green Aug 28 '13 at 10:31

score 2 · Answer 2 · answered Aug 28 '13 at 09:57

try this :

function compute() {
      var a = parseFloat($('#siteFee').val());
      var b = parseFloat($('#qty').val());
      var c = parseFloat($('#vat').val());
      var d = parseFloat($('#incVAT').val());
      var totalVAT = (a * b * c) / 100;
      var grandTotal = a + d;

      $('#incVAT').val(totalVAT);
      $('#total').val(grandTotal);

}

i havent tested.

score 1 · Answer 3 · answered Aug 28 '13 at 09:54

1

The fields a and b are of type string, so it does a string concatenation.

Try

var grandTotal = parseFloat(a) + parseFloat(d);

answered Aug 28 '13 at 09:54

Arun P Johny

384,651
66
527
531

score 1 · Answer 4 · answered Aug 28 '13 at 09:55

1

Try replacing

var grandTotal = a + d;

with

var grandTotal = Number(a) + Number(d);

answered Aug 28 '13 at 09:55

iJade

23,144
56
154
243

score 0 · Answer 5 · answered Aug 28 '13 at 10:02

0

You could create the variables as numbers initially as well, which may be cleaner for any more calculations you need to do.

 var num = new Number(value);

answered Aug 28 '13 at 10:02

Four_lo

1,150
10
28

jQuery Form Calculation - Works, but strange results

5 Answers5