Issue with decimal points and formatting with javascript and HTML forms

Question

I'm not familiar with javascript, apologies if this is a simple task.

I am trying to update a total with options selected via a HTML form using checkboxes but I'm having issues with the formatting of the numbers. I have this working, but I'm having issues with the formatting. The current behaviour is that no decimal points are displayed, but functionality is correct. If I change parseInt to parseFloat, I get the decimal points, but it adds many decimal points if I check and uncheck items. If I add two items, that would give me a figure of 5.90 it only displays 5.9 instead of 5.90.

The desired behaviour would be to only have 2 decimal points (I'm not sure why it even displays things like 2.95000001) and when the amount is 5.90 it displays correctly instead of 5.9

Here is my code so far

<head>
<script type="text/javascript">
    var total = 0;
    function test(item){
        if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        //alert(total);
        document.getElementById('Totalcost').innerHTML = total;
    }
</script>
</head>
<body>
<label>
<input type="checkbox" value="2.95" onClick="test(this);"  />Product 1</label>
<label>
<input type="checkbox" value="2.95" onClick="test(this);"  />Product 2</label>
<h3>Total Amount : $<span id="Totalcost"> </span></h3>

Thank you.

EDIT : I also tried changing this line:

total-= parseInt(item.value);

to this

total-= parseInt(item.value).toFixed(2);

But it just adds the amounts to the end of the total instead of adding them up (like this output : Total Amount : £02.002.002.00

Surely a search for "round to 2 decimal points javascript" would bring up many, many answers. — Mitya
– Mitya, Commented Jun 10, 2017 at 17:38

score 3 · Accepted Answer · 2017-06-10 17:46:54Z

3

toFixed(2) i think is what you need

https://www.w3schools.com/jsref/jsref_tofixed.asp

<head>
<script type="text/javascript">
    var total = 0;
    function test(item){
        if(item.checked){
           total+= parseFloat(item.value);
        }else{
           total-= parseFloat(item.value);
        }
        //alert(total);
        document.getElementById('Totalcost').innerHTML = total.toFixed(2);
    }
</script>
</head>
<body>
<label>
<input type="checkbox" value="2.95" onClick="test(this);"  />Product 1</label>
<label>
<input type="checkbox" value="2.95" onClick="test(this);"  />Product 2</label>
<h3>Total Amount : $<span id="Totalcost"> </span></h3>

edited Jun 10, 2017 at 17:46

answered Jun 10, 2017 at 17:37

user1405631

Sign up to request clarification or add additional context in comments.

6 Comments

omega1 Over a year ago

Thanks, I added that in this format total-= parseInt(item.value).toFixed(2); but it then adds a zero before the amount (and after) but more importantly I get this Total Amount : £02.002.002.00 instead of adding the amounts it adds them to the end!

user1405631 Over a year ago

should parseInt be parseFloat ?

omega1 Over a year ago

I tried changing to to parseFloat again, but when I check multiple items, I get this Total Amount : £02.952.952.95 instead of the amounts being added

omega1 Over a year ago

That works perfect, thanks. I had put the .toFixed(2) in the wrong place :-( Could I ask one more question? How could I initially display the Total as 0.00 instead of it being blank? Thanks again for your help.

user1405631 Over a year ago

<h3>Total Amount : $<span id="Totalcost">0.00</span></h3> and your welcome

|

user8108377 · Accepted Answer · 2017-06-10 17:49:50Z

1

if you are looking to have only 2 decimal number after the "." you can try this code

 var total = 0;
        function test(item){
            if(item.checked){
               total+= parseFloat(item.value)
            }else{
               total-= ParseFloat(item.value)
            }
            //alert(total);
            document.getElem

entById('Totalcost').innerHTML = total.toFixed(2);
    }

answered Jun 10, 2017 at 17:49

user8108377

1 Comment

omega1 Over a year ago

Thank you for your response and help

Collectives™ on Stack Overflow

Issue with decimal points and formatting with javascript and HTML forms

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related