View Full Version : order form total/options problem

12-23-2004, 08:44 PM
i downloaded free code for a basic order form, but now that i'm trying to add more otions, i'm running into trouble. the totaling feature does not work, as you can see. when a check is put in the base system field, it adds the $350, and it will allow a box bulleted in another field, and add the total, but then if another box in another category is bulleted, it replaces the amount from the first bulleted field with the amount from the second- but leaves the first box bulleted. i've attatched the code, if someone can help me out i'd really appreciate it. thanks



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original: Paul DeBrino -->

<!-- Web Site: http://infinity-rd.com -->

<!-- Begin

function CheckChoice(whichbox)


with (whichbox.form)


//Handle differently, depending on type of input box.

if (whichbox.type == "radio")


//First, back out the prior radio selection's price from the total:

hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);

//Then, save the current radio selection's price:

hiddenpriorradio.value = eval(whichbox.price);

//Now, apply the current radio selection's price to the total:

hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);




//If box was checked, accumulate the checkbox value as the form total,

//Otherwise, reduce the form total by the checkbox value:

if (whichbox.checked == false)

{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }

else { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }


//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):

if (hiddentotal.value < 0)




//Now, return with formatted total:




//Define function to format a value as currency:

function formatCurrency(num)


// Courtesy of http://www7.brinkster.com/cyanide7/

num = num.toString().replace(/\$|\,/g,'');


num = "0";

sign = (num == (num = Math.abs(num)));

num = Math.floor(num*100+0.50000000001);

cents = num%100;

num = Math.floor(num/100).toString();


cents = "0" + cents;

for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)

num = num.substring(0,num.length-(4*i+3))+','+


return (((sign)?'':'-') + '$' + num + '.' + cents);


//Define function to init the form on reload:

function InitForm()


//Reset the displayed total on form:








//Set all checkboxes and radio buttons on form-1 to unchecked:

for (xx=0; xx < document.myform.elements.length; xx++)


if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')


document.myform.elements[xx].checked = false;



//Set all checkboxes and radio buttons on form-2 to unchecked:

for (xx=0; xx < document.myform2.elements.length; xx++)


if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')


document.myform2.elements[xx].checked = false;




// End -->



<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="InitForm();" onreset="InitForm();">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<form method="POST" name="myform">

<font face=Arial size=2>

Base System $350

<input type="checkbox" name="base" value=350.00 onclick="this.form.total.value=CheckChoice(this);">

Blank field

<input type="checkbox" name="blank1" value=12.39 onclick="this.form.total.value=CheckChoice(this);">

blank field2

<input type="checkbox" name="blank2" value=18.75 onclick="this.form.total.value=CheckChoice(this);">




128MB DDR333

<input type="radio" name="mem" value=128 price=0.00


256MB DDR333 (Add $15)

<input type="radio" name="mem" value=256 price=15.00


512MB DDR333 (Add $45.00)

<input type="radio" name="mem" value=512 price=45.00


1GB DDR333 (Add $150)

<input type="radio" name="Sauce" value=1 price=150.00






<input type="radio" name="CPU" value=2400 price=0.00


2600 (Add $15)

<input type="radio" name="CPU" value=2600 price=15.00


2800 (Add $45.00)

<input type="radio" name="CPU" value=2800 price=45.00


3000 (Add $150)

<input type="radio" name="CPU" value=3000 price=150.00



<input type="hidden" name="hiddentotal" value=0>

<input type="hidden" name="hiddenpriorradio" value=0>

<font size=+1>

Your total is: <input type="text" name="total" readonly onFocus="this.blur();">




Willy Duitt
12-27-2004, 07:04 AM
Firstly, not quoting attributes, particularly values is bad juju... Also, there is no such thing as a price attribute... Try using an unique id and passing that id to the form values on form submit...

Anyways, try something like this:
(place the script block into the HEAD of the document)

<script type="text/javascript">
function total(){
var form = document.forms['myform'];
for(var i=0; i<form.elements.length; i++){
form.elements[i].onclick = function(){
for(var i=0,total=0; i<this.form.elements.length; i++){
var input = this.form.elements[i];
if(input.type.match(/(checkbox|radio)/i) && input.checked){
total += input.value/1;
} this.form.total.value = '$'+total.toFixed(2);

form.onsubmit = function(){
for(var i=0; i<this.elements.length; i++){
var input = this.elements[i];
input.value = input.id+'/'+input.value;
} window.onload = total;

<body >
<form name="myform" method="get" action="http://google.com">
Base System $350 <input type="checkbox" name="base" value=350.00></label>
Blank field <input type="checkbox" name="blank1" value=12.39>
Blank field2 <input type="checkbox" name="blank2" value=18.75>
128MB DDR333 <input type="radio" name="mem" id="128MB" value=0.00>
256MB DDR333 (Add $15) <input type="radio" name="mem" id="256MB" value=15.00>
512MB DDR333 (Add $45.00) <input type="radio" name="mem" id="512MB" value=45.00>
1GB DDR333 (Add $150) <input type="radio" name="mem" id="1GB" value=150.00>
2400 <input type="radio" name="CPU" id="2400" value=0.00>
2600 (Add $15) <input type="radio" name="CPU" id="2600" value=15.00>
2800 (Add $45.00) <input type="radio" name="CPU" id="2800" value=45.00>
3000 (Add $150) <input type="radio" name="CPU" id="3000" value=150.00>
<br><br><br> Your total is: <input type="text" name="total" value=$0.00 readonly>
<input type="submit" value="Submit">