# Thread: How to calculate with JS?

1. ## 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

2. 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

3. 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>
</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.

4. 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.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•