How to sum values from a checkbox using javascript

Question

Hey all I am trying to update this code I have. It pretty much does what I need it to except one thing. Well two technically, but mostly one I am concerned with. When I check off the boxes I want, it adds up like it is supposed to and adds 5% on top like its supposed to, however it puts the answer in the value of my submit button. How can I stop this from happening? Second (and less important for now) How can I make that total value return as a dollar amount with only 2 decimal points, so instead of returning 0.924 it returns $.92 for example. Thanks!

<body>
<h1> The Fruit Form</h1>
<form action="" name="form1" id="form1">
<input type="checkbox" id='fruit0' value=".59" >Apples ( .59)<br>
<input type="checkbox" id='fruit1' value=".49">Oranges (.49)<br>
<input type="checkbox" id='fruit2' value=".39">Bananas(.39)<br>

<input type="submit" onclick="UpdateCost()" id="totalcost" value="Submit">

</form>
<script type="text/javascript">
function UpdateCost() {
  var sum = 0;
  var fid, elem;
  for (i=0; i<3; i++) {
    fid = 'fruit'+i;
    elem = document.getElementById(fid);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2)*1.05;
  alert("Your Total Is:" + totalcost.value);
  return false
} 
</script>
</body>

Try `(sum * 1.05).toFixed(2)` instead of `sum.toFixed(2)*1.05` — PSL, Dec 19 '13 at 03:06
Great, we solved your problem. However, the question is useless for future users if you remove the wrong code. I'll revert that for you. Note that you can also post an answer yourself, stating that that is the working code. — GitaarLAB, Dec 19 '13 at 03:22
The reason of error happening: http://stackoverflow.com/questions/588004/is-floating-point-math-broken — , Mar 24 '16 at 13:23

GitaarLAB · Accepted Answer · 2013-12-19T03:15:59.753

Your submit-button's id is totalcost and your function gets the element with the id totalcost:

document.getElementById('totalcost').value = sum.toFixed(2)*1.05;

So you can prevent this by not doing this.

Instead of sum.toFixed(2)*1.05 you should do (sum * 1.05).toFixed(2) as was commented by PSL.

Instead, update your variable:

sum = (sum * 1.05).toFixed(2);

or create a new variable say total:

var total = (sum * 1.05).toFixed(2);

or just process it where you output the value:

alert(  (sum * 1.05).toFixed(2)  );

Extra:
Since you are working with money up to 2 decimal points, I'd like to make you aware of the fact that in javascript 0.1+0.2 is NOT 0.3!

The best way to avoid that is to multiply all numbers by the accuracy you need and devide the final (sub-) result by that precision on output.

So: (52 cents + 18 cents = 70 cents) / 100 = 0.7 (and here you'd use toFixed so it becomes 0.70 ).

Right. I figured the problem lied somewhere in that area, but I am not sure where else to put it. Any suggestions? — user3097967, Dec 19 '13 at 03:13
Hey thanks a lot, that helped a lot I update my original question...it may not be 100% accurate , but for the most part it does what I was wanting. You definitely pushed me in the right direction, thanks again. — user3097967, Dec 19 '13 at 03:22

score 0 · Answer 2 · answered Dec 19 '13 at 03:25

Just some code comments:

If can get a reference to the form if you pass this to the function:

<input type="submit" onclick="UpdateCost(this)"  ...>

In the function:

function UpdateCost(element) {
  var sum = 0;
  var fid, elem;

Store a reference to the form:

  var form = element.form;

  for (i=0; i<3; i++) {
    fid = 'fruit'+i;
    elem = document.getElementById(fid);

The above can be:

    elem = form[fid];

    if (elem.checked == true) {
      sum += Number(elem.value);
    }

And that can be:

    sum += elem.checked? +elem.value : 0;

where the unary + will convert the value to a number.

  }
  document.getElementById('totalcost').value = sum.toFixed(2)*1.05;

becomes:

  form.totalcost.value = '$' + (sum * 1.05).toFixed(2);

HTH.

Thanks RobG, also helpful information, this makes things a bit cleaner. — user3097967, Dec 19 '13 at 03:35

How to sum values from a checkbox using javascript

2 Answers2