View Full Version : Order Form HELP!

09-18-2006, 05:55 PM
Following is the code I grab from the JavaScript Source site.
It's a pretty neat code which will sum up the total of all the items you select and display the amount instantly. However, I tried to modify the script so that I can have more than just one section for Ratio Buttons. For Instance, the original output looks like this:

Steak $15.25 Chicken $12.39 Sushi $18.75 <checkbox section

None, thanks Duck Sauce $10.99 Ginger Sauce $5.00 Hot Sauce $1.50 <radio button section

The second line is where you can pick one of the radio buttons. The output I need is more than one section like this and it should look like:

Steak $15.25 Chicken $12.39 Sushi $18.75 <checkbox section

None, thanks Duck Sauce $10.99 Ginger Sauce $5.00 Hot Sauce $1.50 <radio button section
None, thanks BBQ $15.99 XYZ Sauce $25.00 B Sauce $14.50 <additional radio button section
None, thanks C Sauce $20.99 D Sauce $5.00 E Sauce $1.50 <additional radio button section

The problem I have is, I can't have the math calculate correctly.
After I add the additional section, when I select one of the radio buttons, the total does not add the additional items I select even I change the form name. I guess it is because the function that the author wrote originally supports only one section of the radio button options.

Can anybody help me with this?


1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->



<!-- 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>
Steak $15.25
<input type="checkbox" name="Steak" value=15.25 onclick="this.form.total.value=CheckChoice(this);">
Chicken $12.39
<input type="checkbox" name="Chicken" value=12.39 onclick="this.form.total.value=CheckChoice(this);">
Sushi $18.75
<input type="checkbox" name="Sushi" value=18.75 onclick="this.form.total.value=CheckChoice(this);">
<b>Prepare with this special sauce (extra charge -- only one selection allowed):</b>
None, thanks
<input type="radio" name="Sauce" value=none price=0.00
Duck Sauce $10.99
<input type="radio" name="Sauce" value=duck price=10.99
Ginger Sauce $5.00
<input type="radio" name="Sauce" value=ginger price=5.00
Hot Sauce $1.50
<input type="radio" name="Sauce" value=hot price=1.50
<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();">
(Note: Total can not be changed by the visitor.)

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

<!-- Script Size: 5.24 KB -->