View Full Version : HELP! with Calculation

05-13-2009, 02:47 AM
Hi people... im a bit of a noob with javascript but im learning quickly..
basically i need a calculator that adds up values when ticked.

i got this code and its all working..

<script type="text/javascript">
function calculate(f)
var nums = f.num;
var ntext = f.numtext;
var nitem = f.numitem;
var result = 0;
var items = '';
for(var i=0;i<nums.length;i++)

//if you want to fix to 2 decimal places


<input type="checkbox" name="num" onClick="calculate(this.form)">
<input name="numtext" type="text" onChange="calculate(this.form)" value="59" size="3"><input name="numitem" type="text" class="tb-gradient" onChange="calculate(this.form)" value="4 Camera ">

<input type="text" name="answer" size="10">

<textarea name="allitems" rows="10" cols="50"></textarea>

but i also need it so people can input a value into textbox and have it multiply by a pre-determined number then have that add to the total...

if anyone can help it will be greatly appreciated!
seems like a fairly basic thing but just cant get my head around it.. cheers

Old Pedant
05-13-2009, 03:50 AM
Homework for a class??

A couple of fundamentals:

(1) You only have ONE checkbox. Your variable nums correctly refers to it.
*BUT* because there is only one, the expression nums.length in your line
for(var i=0;i<nums.length;i++)
will be null and you will get an error right then and there.

You only get an array for checkboxes when you have more than one of the same name.

(2) Same thing for your ntext variable. It refers to your ONE AND ONLY "numtext" field. So it will *NOT* be an array. Period.

(3) Can you guess? Yep, ditto for your nitem variable.

You can't index into a non-existent array, which you are trying to do with all 3 of those.

If you WANT multiple checkbxes, etc., then you must put them in before this code will begin to work.

05-13-2009, 04:03 AM
Thanks for the reply... I didnt explain the code...
I just put down the script and a single example of the tick box and total outcome... i have multiple tickboxes it all works..should have explained that sorry//

i just need an additional feature where a user can input a numeric value into a text box and that value is multiplied by a static value then added to the total box along with the selected items in the text box...


Old Pedant
05-13-2009, 04:13 AM
So show the extra text box and show the static value.

It's no different than adding. Use parseFloat and multiply. (Or don't bother with parseFloat...when you multiply JS will do the parseFloat automatically.)

If you show the page again, show at least two or three of the checkboxes, et al., so we can run the code as written.

05-13-2009, 08:24 AM
The hardest part of doing this is usually the part beforehand - where you plan your strategy. Why use checkboxes to select a product, when the user will have the option of filling in the amount? That alone is enough to trigger recalculation. Why hardcode values in there (value="59") from load? Why not make all the fields (except the quantity) read-only? Inquiring minds want to know ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {background:buttonface;font:bold 12px monospace;}
input {width:70px;padding:2px;margin:1px;background:ivory;}
textarea {padding:2px;background:ivory;}
<script type="text/javascript">

function calculate(f)
var productnum = f.elements['productnum'];
var productname = f.elements['productname'];
var productprice = f.elements['productprice'];
var subtotal = f.elements['subtotal'];
var num = 0;
var sub = 0;
var total = 0;
var allproductnames = '';
var n = 1;
for(var i = 0; i < productnum.length; i++) //loop
num = Number(productnum[i].value); //coerce
if (!/^\d+$/.test(num)) //check it
alert('Please enter only numbers.'); //bad dog!
num = 0; //reset
productnum[i].value = num; //reset field
sub = num * parseFloat(productprice[i].value); //calculate
subtotal[i].value = sub.toFixed(2); //set
total += sub; //accumulate
if (num > 0) //add product to list
allproductnames += n++ + ') ' + productname[i].value + ' (' + num + ')' + '\n'; //list
f.elements['allproductstotal'].value = '$' + total.toFixed(2); //total
f.elements['allproducts'].value = allproductnames; //print

number: <input name="productnum" type="text" onblur="calculate(this.form)" value="0" />
name: <input name="productname" type="text" class="tb-gradient" value="Camera 4" readonly="readonly" />
price: <input type="text" name="productprice" value="100.00" readonly="readonly" />
subtotal: <input type="text" name="subtotal" />
<br />
number: <input name="productnum" type="text" onblur="calculate(this.form)" value="0" />
name: <input name="productname" type="text" class="tb-gradient" value="Camera 5" readonly="readonly" />
price: <input type="text" name="productprice" value="200.00" readonly="readonly" />
subtotal: <input type="text" name="subtotal">
<br />
number: <input name="productnum" type="text" onblur="calculate(this.form)" value="0" />
name: <input name="productname" type="text" class="tb-gradient" value="Camera 6" readonly="readonly" />
price: <input type="text" name="productprice" value="300.00" readonly="readonly" />
subtotal: <input type="text" name="subtotal"><br /><br />
<input name="allproductstotal" type="text" value="$0.00" readonly="readonly" />
<br /><br />
<textarea name="allproducts" rows="6" cols="18" readonly="readonly"></textarea>

Did that in a hurry so there are probably errors. Oops in advance.

05-15-2009, 02:17 AM
Thanks Adios... much appreciated ;)