# How to calculate with JS?

• Nov 20, 2002, 12:55
tigrvision
How to calculate with JS?
I'm just starting out in JS and would like to know how to solve this.
I have an HTML form with 3 checkboxes, like a would-be order form. For example, on checkbox 1, the product is a toy car that costs \$5.00, second box is a cigar cutter for \$50, etc. I to have a button that when clicked, enters the total price (no taxes or subtotals) into a textbox field below in the same page.
Can someone help out with this? Would really appreciate it.
Thanks.
tigrvision
• Nov 20, 2002, 14:25
asp-hosting.ca
I made this example for you:

Code:

```<form> <input type="checkbox" name="chProduct1" value="5"> Product 1 - \$5<br> <input type="checkbox" name="chProduct2" value="50"> Product 2 - \$50<br> <input type="checkbox" name="chProduct3" value="500"> Product 3 - \$500 <br> Total <input type="text" name="Total" value="0"><br> <input type="button" onclick="calcTotal(this.form)" value="Total"><br> </form> <script>         function calcTotal(frm){                 frm.Total.value = 0;                 for(i=0;i<frm.length;i++){                         if(frm.elements[i].name.substr(0,2)=="ch"&&frm.elements[i].checked){                                 frm.Total.value = parseInt(frm.Total.value) + parseInt(frm.elements[i].value);                         }                 }         } </script>```
Any questions let me know :)
• Nov 20, 2002, 14:55
tigrvision
Thanks a lot, asp!
the code worked, only thing is that I'm getting a JS error in the browser (IE6).
"'Total' is null or not an object"
Not sure why that is.
Here's the relevant part of my form:
Code:

```<table> <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Pro         Football</font></td>       <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">\$349         <input name="chActivity_profoot" type="checkbox" id="activity_profoot" value="349.00" onclick="calcTotal(this);">         </font></td>     </tr>     <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">College         Football</font></td>       <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">\$349         <input name="chActivity_colfoot" type="checkbox" id="activity_colfoot" value="349.00" onclick="calcTotal(this);">         </font></td>     </tr>     <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Golf</font></td>       <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">\$349         <input name="chActivity_golf" type="checkbox" id="activity_golf" value="349.00" onclick="calcTotal(this);">         </font></td>     </tr>     <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Racing</font></td>       <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">n/a</font></td>     </tr>     <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Baseball</font></td>       <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">n/a</font></td>     </tr>     <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Other</font></td>       <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">n/a</font></td>     </tr>     <tr>       <td align="right">&nbsp;</td>       <td><input type="button" onClick="calcTotal(this.form)" value="Total"></td>     </tr>     <tr>       <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Total         Amount to be charged</font></td>       <td>         <input name="Total" type="text" value="0" readonly></font>         </td>     </tr> </table> <script>         function calcTotal(frm){                 frm.Total.value = 0;                 for(i=0;i<frm.length;i++){                         if(frm.elements[i].name.substr(0,2)=="ch"&&frm.elements[i].checked){                                 frm.Total.value = parseInt(frm.Total.value) + parseInt(frm.elements[i].value);                         }                 }         } </script>```
I appreciate your help on this.
• Nov 20, 2002, 15:19
asp-hosting.ca
tigrvision,

There is a problem with your code. The calcTotal function expects the object FORM as a parameter. You have call to this function from within INPUT element, but you are passing the INPUT object not the FORM object:

Code:

`<input name="chActivity_colfoot" type="checkbox" id="activity_colfoot" value="349.00" onclick="calcTotal(this);">`
If you want to pass the form object from within INPUT element use this.form otherwise you'll get error from the function.
The correct code should be:

Code:

`<input name="chActivity_colfoot" type="checkbox" id="activity_colfoot" value="349.00" onclick="calcTotal(this.form);">`
If you want to have cents in the prices use parseFloat function instead of parseInt.

I hope this helps.