View Full Version : Calculate running total

08-09-2008, 03:52 AM
I had a form with a running total working until I was asked to add some
checkboxes. Here is what I have:


The first section works, but I can't get any part of "Make Additional
Donation" add to the total. You can view the source, but I left
out the javascript that didn't work for me. Any help would be appreciated. Thanks.

08-09-2008, 05:57 AM
Ok it took me a little bit and I changed your form a little but I have something for you. Use this function:

<script type="text/javascript">
var rad = 0;
function total(){
// use the form values to set the variables
val1 = document.frm.qty1.value;
val2 = document.frm.qty2.value;
val3 = rad;
val4 = document.frm.other.value;
// this section tests each variable to see if
// if it is set and is a number if so it handles
// it as needed
if(val1 && regX.test(val1)){
p1 = val1*25;
document.frm.subtotal1.value = p1;
if(val2 && regX.test(val2)){
p2 = val2*45;
document.frm.subtotal2.value = p2;
if(val3 && regX.test(val3)){
p3 = val3;
if(val4 && regX.test(val4)){
p4 = val4;
// this last part just adds everything togeather
// and sets it to what needs it
tot = p1+p2+p3+p4;
document.frm.finaltotal.value = tot;
document.frm.finalqty.value = val1 + val2;
With this form:

<!-- I changed your form name because form is a dangerous word to use-->
<form method="POST" name="frm">
<div class="optional">
<label for="qty1"><strong>Lunch Only:<br />
<input name="qty1" type="text" onchange="total();" class="inputText" id="qty1" size="3" value="0" />

$25 ea = $
<!-- on inputs that hold totals I added some code that when the element is focused on it switches to the element that populates it-->
<input name="subtotal1" type="text" size="8" onfocus="document.form.qty1.focus();" class="inputText" />
<div class="optional">
<label for="qty2"><strong>Lunch and Dinner:<br />

<input name="qty2" type="text" onchange="total();" class="inputText" id="qty2" size="3" value="0" />
$45 ea = $
<input name="subtotal2" type="text" size="8" onfocus="document.form.qty2.focus();" class="inputText" />

<br />
Make additional donation:
<!-- I changed these to radio buttons so that people don't accidentally add more than they mean to and I also use them to set the value
of the rad variable that is used in total()-->
<input type="radio" id='200' name="addit" onclick="rad=200;total();" >$200<br>
<input type="radio" id='100' name="addit" onclick="rad=100;total();">$100<br>
<input type="radio" id='50' name="addit" onclick="rad=50;total();">$50<br>
<input type="radio" id='25' name="addit" onclick="rad=25;total();">$25<br>

<input name='other' type="text" onchange="total();" value="0" size="6">

<input name="finaltotal" type="text" value="" size="10" onfocus="document.form.qty1.focus();" class="inputText" id="finaltotal"/>
<input name="finalqty" type="hidden" value="" size="10" readonly="readonly" class="inputText" id="finalqty"/>

08-09-2008, 08:34 AM
Thank you, but I tried your code and the final total field doesn't seem to work:


08-09-2008, 09:08 AM
From the link given on post#1. Please follow these steps:
Change this part:

<input type="checkbox" id='200' value="200" onclick="compute(this.form)">$200<br>
<input type="checkbox" id='100' value="100" onclick="compute(this.form)">$100<br>
<input type="checkbox" id='50' value="50" onclick="compute(this.form)">$50<br>
<input type="checkbox" id='25' value="25" onclick="compute(this.form)">$25<br>
<input name='other' type="text" onClick="compute(this.form)" value="" size="6">


<input type="checkbox" id='200' value="200" onclick="if(this.checked==true)compute1(this.form,this.value,'1');else compute1(this.form,this.value,'0');">$200<br>
<input type="checkbox" id='100' value="100" onclick="if(this.checked==true)compute1(this.form,this.value,'1');else compute1(this.form,this.value,'0');">$100<br>
<input type="checkbox" id='50' value="50" onclick="if(this.checked==true)compute1(this.form,this.value,'1');else compute1(this.form,this.value,'0');">$50<br>
<input type="checkbox" id='25' value="25" onclick="if(this.checked==true)compute1(this.form,this.value,'1');else compute1(this.form,this.value,'0');">$25<br>
<input name='other' type="text" onclick="if(this.checked==true)compute1(this.form,this.value,'1');else compute1(this.form,this.value,'0');" value="" size="6">

And have this function:

function compute1(frm,e,todo)
/* compute1 function takes three parameters. //
* First parameter is the form that the element is within. Expected input should be "this.form"
* Second parameter is to accept the value assigned to the checkbox
* Last parameter is to instruct the script what to do. Values should either be 1/0. 1=addition and 0=subtraction
// End notes */
var tot=Number(frm.finaltotal.value);

Please read comments. Parameters are explained. Hope that helps.

08-09-2008, 05:06 PM
Sorry the problem was in the last two lines. I forgot to assign it to the value

document.frm.finaltotal.value = tot;
document.frm.finalqty.value = val1 + val2;

08-09-2008, 09:18 PM
Thanks rangana....the checkboxes work just as I wanted. The only thing is the "Other" field that I didn't add to the total. Thanks again.