...

View Full Version : order form running total



Kal
09-03-2007, 12:41 PM
Hi Guys,

i have found a script after browsing through various sites. This script basically builds a running total of an order form.

however i need to slighty modify it but having difficulty in doing this.

When you first come to the page the total is zero, however some of the options maybe selected by default and so the total will not be zero.

also i need to include a drop down, depending on the number chosen the value will change the total. for example for each addional line a charge of 11.33 is added

any help would be great.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script>

// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem)
{
with (inputItem.form)
{
// Process each of the different input types in the form.
if (inputItem.type == "radio")
{ // Process radio buttons.
// Subtract the previously selected radio button value from the total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
// Save the current radio selection value.
previouslySelectedRadioButton.value = eval(inputItem.value);
// Add the current radio button selection value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
else
{ // Process check boxes.
if (inputItem.checked == false)
{ // Item was uncheck. Subtract item value from total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
}
else
{ // Item was checked. Add the item value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
}

// Total value should never be less than 0.
if (calculatedTotal.value < 0)
{
InitForm();
}

// Return total value.
return(formatCurrency(calculatedTotal.value));

}

}

// Format a value as currency.
function formatCurrency(num)
{
num = num.toString().replace(/\$|\,/g,'');

if(isNaN(num))

num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();

if(cents<10)
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)) + ',' + num.substring(num.length-(4*i+3));

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

// This function initialzes all the form elements to default values.
function InitForm()
{
// Reset values on form.
document.selectionForm.total.value='$0';
document.selectionForm.calculatedTotal.value=0;
document.selectionForm.previouslySelectedRadioButton.value=0;

// Set all checkboxes and radio buttons on form to unchecked.
for (i=0; i < document.selectionForm.elements.length; i++)
{
if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio')
{
document.selectionForm.elements[i].checked = false;
}
}

}

</script>

</HEAD>

<BODY>

<!-- Paste this code into the BODY tag -->

<body onload="InitForm();" onreset="InitForm();">

<!-- Paste this code into the BODY section of your HTML document -->

<div align="center">

<table>

<tr>

<td>

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

<b>Pizza Order</b><br>
Small $10.00
<input type="checkbox" name="Steak" value="10.00" onclick="this.form.total.value=calculateTotal(this);">
Medium $12.00
<input type="checkbox" name="Chicken" value="12.00" onclick="this.form.total.value=calculateTotal(this);">
Large $15.00
<input type="checkbox" name="Sushi" value="15.00" onclick="this.form.total.value=calculateTotal(this);">

<br><br>

<b>Extra Toppings (only one selection allowed):</b> <br>
<input type="radio" name="Sauce" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> None
<br>
<input name="Sauce" type="radio" value="1.00" onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
<br>
<input type="radio" name="Sauce" value="2.00" onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
<br>
<input type="radio" name="Sauce" value="3.00" onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00
<br>

<br>
<TR>
<TD>Number of Lines:</TD>
<TD><font color="#FFFFFF">* </font>
<SELECT NAME="no_of_lines">
<OPTION VALUE="1" selected>1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
<OPTION VALUE="6">6
<OPTION VALUE="7">7
<OPTION VALUE="8">8
<OPTION VALUE="9">9
</SELECT>11.33 additonal lines
</TD>
</TR>

<br>
<br>

<input type="hidden" name="calculatedTotal" value="0">
<input type="hidden" name="previouslySelectedRadioButton" value="0">
<strong>Your total is:</strong>
<input type="text" name="total" readonly onfocus="this.blur();">

</form>

</td>

</tr>

</table>

</div>

</BODY>

</HTML>

vwphillips
09-03-2007, 04:28 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var zxcFieldAry=[['Sauce'],['Sushi'],['Chicken'],['Steak'],['no_of_lines',11.33],['total',2,'$']];

function zxcInitForm(zxcnme,zxcary){
var zxcfrm=document[zxcnme];
zxcfrm.cal=[];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
zxcfrm.cal.push(zxcary[zxc0]);
}
zxcCalculate(zxcfrm);
}

function zxcCalculate(zxcfrm){
var zxctotal=0
for (var zxc0=0;zxc0<zxcfrm.cal.length-1;zxc0++){
var zxcobj=zxcfrm[zxcfrm.cal[zxc0][0]]
if (zxcobj.type=='text'||(zxcobj.type=='checkbox'&&zxcobj.checked)&&!zxcobj.length){
zxctotal+=zxcobj.value*(zxcfrm.cal[zxc0][1]||1);
}
else if (zxcobj.length){
for (var zxc0a=0;zxc0a<zxcobj.length;zxc0a++){
if (zxcobj[0].type=='radio'||zxcobj[0].type=='checkbox'){
if (zxcobj[zxc0a].checked) zxctotal+=zxcobj[zxc0a].value*(zxcfrm.cal[zxc0][1]||1);
}
}
if (zxcobj.tagName=='SELECT'){
zxctotal+=zxcobj.value*(zxcfrm.cal[zxc0][1]||1);
}
}
}
zxcfrm[zxcfrm.cal[zxc0][0]].value=(zxcfrm.cal[zxc0][2]||'')+zxctotal.toFixed(zxcfrm.cal[zxc0][1]||2);
}





/*]]>*/
</script>
</HEAD>

<BODY>

<!-- Paste this code into the BODY tag -->

<body onload="InitForm();zxcInitForm('selectionForm',zxcFieldAry)" onreset="InitForm();">

<!-- Paste this code into the BODY section of your HTML document -->

<div align="center">

<table>

<tr>

<td>

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

<b>Pizza Order</b><br>
Small $10.00
<input type="checkbox" name="Steak" value="10.00" onclick="zxcCalculate(this.form);">
Medium $12.00
<input type="checkbox" name="Chicken" value="12.00" onclick="zxcCalculate(this.form);">
Large $15.00
<input type="checkbox" name="Sushi" value="15.00" onclick="zxcCalculate(this.form);">

<br><br>

<b>Extra Toppings (only one selection allowed):</b> <br>
<input type="radio" name="Sauce" value="0.00" onclick="zxcCalculate(this.form);"> None
<br>
<input name="Sauce" type="radio" value="1.00" onclick="zxcCalculate(this.form);"> Extra Cheese $1.00
<br>
<input type="radio" name="Sauce" value="2.00" onclick="zxcCalculate(this.form);"> Vegetarian $2.00
<br>
<input type="radio" name="Sauce" value="3.00" onclick="zxcCalculate(this.form);"> Meat $3.00
<br>

<br>
<TR>
<TD>Number of Lines:</TD>
<TD><font color="#FFFFFF">* </font>
<SELECT NAME="no_of_lines">
<OPTION VALUE="1" selected>1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
<OPTION VALUE="6">6
<OPTION VALUE="7">7
<OPTION VALUE="8">8
<OPTION VALUE="9">9
</SELECT>11.33 additonal lines
</TD>
</TR>

<br>
<br>

<input type="hidden" name="calculatedTotal" value="0">
<input type="hidden" name="previouslySelectedRadioButton" value="0">
<strong>Your total is:</strong>
<input type="text" name="total" readonly onfocus="this.blur();">

</form>

</td>

</tr>

</table>

</div>

</BODY>

</HTML>

orentha
11-01-2007, 12:28 AM
Hi
I'm trying to modify a script just like this one
(which is why i'm replying to this thread, and not starting a new one)


Here's my code:


<html><head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide javascript from non-JavaScript browsers.
// This function calculates the total for items in the form which are selected
function calculateTotal(inputItem) {
with (inputItem.form) {
// process each of the different input types in the form.
if (inputItem.type == "radio") { // process radio buttons
// subtract the previously selected radio button value from the total
calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
// save the current radio selection value
previouslySelectedRadioButton.value = eval(inputItem.value);
// add the current radio button selection value to the total
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
} else { // process check boxes
if (inputItem.checked == false) { // item was uncheck. subtract item value from total
calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
} else { // item was checked. add the item value to the total
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
}

// total value should never be less than 0
if (calculatedTotal.value < 0) {
InitForm();
}

// return total value
return(formatCurrency(calculatedTotal.value));
}
}

// format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');

if(isNaN(num))
num = "0";

sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();

if(cents<10)
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)) + ',' + num.substring(num.length-(4*i+3));

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

// This function initialzes all the form elements to default values
function InitForm() {
//Reset values on form
document.selectionForm.total.value='$0.00'; // set initial total
document.selectionForm.calculatedTotal.value=0;
document.selectionForm.previouslySelectedRadioButton.value=0;

//Set all checkboxes and radio buttons on form to unchecked:
for (i=0; i < document.selectionForm.elements.length; i++) {
if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
document.selectionForm.elements[i].checked = false;
}
}

}

// end commenting javascript -->
</SCRIPT>

</head>

<body onload="InitForm();" onreset="InitForm();">

<form method="POST" name="selectionForm">
<b>Pizza Order</b> <br>
<font face=Arial size=2>
Small $10.00
<input type="checkbox" name="Steak" value=10.00 onclick="this.form.total.value=calculateTotal(this);">
Medium $12.00
<input type="checkbox" name="Chicken" value=12.00 onclick="this.form.total.value=calculateTotal(this);">
Large $15.00
<input type="checkbox" name="Sushi" value=15.00 onclick="this.form.total.value=calculateTotal(this);">
<br>
<br>
<b>Extra Toppings (only one selection allowed):</b> <br>
<input type="radio" name="Sauce" value=0.00 onclick="this.form.total.value=calculateTotal(this);"> None
<br>
<input name="Sauce" type="radio" value=1.00 onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
<br>
<input type="radio" name="Sauce" value=2.00 onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
<br>
<input type="radio" name="Sauce" value=3.00 onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00
</font>
<p>&nbsp;</p>
<p>
<font face=Arial size=2>
&nbsp;


<b>Extra Special Toppings (only one selection allowed):</b> <br>
<input type="radio" name="extra" value=0.00 onclick="this.form.total.value=calculateTotal(this);"> None
<br>
<input name="extra" type="radio" value=5.00 onclick="this.form.total.value=calculateTotal(this);"> Peppers $5.00
<br>
<input type="radio" name="extra" value=6.00 onclick="this.form.total.value=calculateTotal(this);"> Olives $6.00
<br>
<input type="radio" name="extra" value=7.00 onclick="this.form.total.value=calculateTotal(this);"> Bacon $7.00
<br>
<br>
<br>
<input type="hidden" name="calculatedTotal" value=0>
<input type="hidden" name="previouslySelectedRadioButton" value=0>
<font size=+1> Your total is: </font><font face=Arial size=2><font size=+1>
<input type="text" name="total" readonly onFocus="this.blur();">
</font></font><font size=+1> </font> <br>
<br>
</font>
</p>
</form>

<pre>

</body>
</html>



Now, my question is how to I add more options to the original script
in the code I posted above, i added another set of "toppings"
and I want them to be added to the running total also.

an example:
select small - $10
extra cheese - $1
Olives - $6
total $17

right now, it will only select 1 option from "extra toppings" or 1 options from "extra special toppings"

what exactly do I need to modify in the code to accomplish this ??

Thanks in advance.

vwphillips
11-01-2007, 01:27 PM
<html><head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide javascript from non-JavaScript browsers.
// This function calculates the total for items in the form which are selected

function CalculateTotal(inputItem) {
var frm=inputItem.form;
if (!frm.fields) frm.fields='';
if (!frm.fields.match(inputItem.name)) frm.fields+=inputItem.name+',' // add the inputItem name to frm.fields
var fieldary=frm.fields.split(','); // convert frm.fields to an array
var cal=0;
for (var zxc0=0;zxc0<fieldary.length-1;zxc0++){ // loop through the field names
var input=document.getElementsByName(fieldary[zxc0]); // an array of fields with the mame
for (var zxc0a=0;zxc0a<input.length;zxc0a++){ // loop through the input array to detect checked fields
if (input[zxc0a].checked) cal+=input[zxc0a].value*1; // convert the value to a number and add to cal
}
}
frm.calculatedTotal.value=cal;
frm.total.value=formatCurrency(cal);
}



// format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');

if(isNaN(num))
num = "0";

sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();

if(cents<10)
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)) + ',' + num.substring(num.length-(4*i+3));

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

// This function initialzes all the form elements to default values
function InitForm() {
//Reset values on form
var frm=document.selectionForm;
frm.total.value='$0.00'; // set initial total
frm.calculatedTotal.value=0;
frm.previouslySelectedRadioButton.value=0;

//Set all checkboxes and radio buttons on form to unchecked:
for (i=0; i < frm.elements.length; i++) {
if (frm.elements[i].type == 'checkbox' || frm.elements[i].type == 'radio') {
frm.elements[i].checked =(frm.elements[i].value!='0.00')? false:true;
}
}

}

// end commenting javascript -->
</SCRIPT>

</head>

<body onload="InitForm();" onreset="InitForm();">

<form method="POST" name="selectionForm">
<b>Pizza Order</b> <br>
<font face=Arial size=2>
Small $10.00
<input type="checkbox" name="Steak" value=10.00 onclick="CalculateTotal(this);">
Medium $12.00
<input type="checkbox" name="Chicken" value=12.00 onclick="CalculateTotal(this);">
Large $15.00
<input type="checkbox" name="Sushi" value=15.00 onclick="CalculateTotal(this);">
<br>
<br>
<b>Extra Toppings (only one selection allowed):</b> <br>
<input type="radio" name="Sauce" value=0.00 onclick="CalculateTotal(this);"> None
<br>
<input type="radio" name="Sauce" value=1.00 onclick="CalculateTotal(this);"> Extra Cheese $1.00
<br>
<input type="radio" name="Sauce" value=2.00 onclick="CalculateTotal(this);"> Vegetarian $2.00
<br>
<input type="radio" name="Sauce" value=3.00 onclick="CalculateTotal(this);"> Meat $3.00
</font>
<p>&nbsp;</p>
<p>
<font face=Arial size=2>
&nbsp;


<b>Extra Special Toppings (only one selection allowed):</b> <br>
<input type="radio" name="extra" value=0.00 onclick="CalculateTotal(this);"> None
<br>
<input type="radio" name="extra" value=5.00 onclick="CalculateTotal(this);"> Peppers $5.00
<br>
<input type="radio" name="extra" value=6.00 onclick="CalculateTotal(this);"> Olives $6.00
<br>
<input type="radio" name="extra" value=7.00 onclick="CalculateTotal(this);"> Bacon $7.00
<br>
<br>
<br>
<input type="hidden" name="calculatedTotal" value=0>
<input type="hidden" name="previouslySelectedRadioButton" value=0>
<font size=+1> Your total is: </font><font face=Arial size=2><font size=+1>
<input type="text" name="total" readonly onFocus="this.blur();">
</font></font><font size=+1> </font> <br>
<br>
</font>
</p>
</form>

<pre>

</body>
</html>

orentha
11-01-2007, 09:53 PM
Awesome. thank you very much

and I do have another question :rolleyes:

I want to add a sumbit button at the bottom of the form to "send" the selected data to another page. (basically just a page that lists out what was selected, and the total)

I was able to send the info using a super basic php script, but that sent what was in the "value" tag of the form...
and now this javascript uses the value tag to calculate the total price...

so if I select bacon, it would send "$7.00" to the next page, when I want it to send the word Bacon


is there a was to do this with javascript, or should I post this question over in the php forum to see if there is a way using php ??

thanks a lot.

vwphillips
11-02-2007, 12:52 AM
Not sure I understand

but


<html><head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide javascript from non-JavaScript browsers.
// This function calculates the total for items in the form which are selected
var PriceAry=[];
PriceAry[0]=['None',0.00];
PriceAry[1]=['Steak',10.00];
PriceAry[2]=['Chicken',12.00];
PriceAry[3]=['Sushi',15.00];
PriceAry[4]=['Extra Cheese',1.00];
PriceAry[5]=['Vegetarian',2.00];
PriceAry[6]=['Meat',3.00];
PriceAry[7]=['Peppers',5.00];
PriceAry[8]=['Olives',6.00];
PriceAry[9]=['Bacon',7.00];

function CalculateTotal(inputItem) {
var frm=inputItem.form;
if (!frm.fields) frm.fields='';
if (!frm.fields.match(inputItem.name)) frm.fields+=inputItem.name+',' // add the inputItem name to frm.fields
var fieldary=frm.fields.split(','); // convert frm.fields to an array
var cal=0;
for (var zxc0=0;zxc0<fieldary.length-1;zxc0++){ // loop through the field names
var input=document.getElementsByName(fieldary[zxc0]); // an array of fields with the mame
for (var zxc0a=0;zxc0a<input.length;zxc0a++){ // loop through the input array to detect checked fields
if (input[zxc0a].checked){
for (var zxc0b=0;zxc0b<PriceAry.length;zxc0b++){ // loop through PriceAry to match input value with field 0 of each field
if (input[zxc0a].value==PriceAry[zxc0b][0]){
cal+=PriceAry[zxc0b][1];
}
}


}
}
}
frm.calculatedTotal.value=cal;
frm.total.value=formatCurrency(cal);
}



// format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');

if(isNaN(num))
num = "0";

sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();

if(cents<10)
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)) + ',' + num.substring(num.length-(4*i+3));

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

// This function initialzes all the form elements to default values
function InitForm() {
//Reset values on form
var frm=document.selectionForm;
frm.total.value='$0.00'; // set initial total
frm.calculatedTotal.value=0;
frm.previouslySelectedRadioButton.value=0;

//Set all checkboxes and radio buttons on form to unchecked:
for (i=0; i < frm.elements.length; i++) {
if (frm.elements[i].type == 'checkbox' || frm.elements[i].type == 'radio') {
frm.elements[i].checked =(frm.elements[i].value!='None')? false:true;
}
}

}

// end commenting javascript -->
</SCRIPT>

</head>

<body onload="InitForm();" onreset="InitForm();">

<form method="POST" name="selectionForm">
<b>Pizza Order</b> <br>
<font face=Arial size=2>
Small $10.00
<input type="checkbox" name="Steak" value="Steak" onclick="CalculateTotal(this);">
Medium $12.00
<input type="checkbox" name="Chicken" value="Chicken" onclick="CalculateTotal(this);">
Large $15.00
<input type="checkbox" name="Sushi" value="Sushi" onclick="CalculateTotal(this);">
<br>
<br>
<b>Extra Toppings (only one selection allowed):</b> <br>
<input type="radio" name="Sauce" value="None" onclick="CalculateTotal(this);"> None
<br>
<input type="radio" name="Sauce" value="Extra Cheese" onclick="CalculateTotal(this);"> Extra Cheese $1.00
<br>
<input type="radio" name="Sauce" value="Vegetarian" onclick="CalculateTotal(this);"> Vegetarian $2.00
<br>
<input type="radio" name="Sauce" value="Meat" onclick="CalculateTotal(this);"> Meat $3.00
</font>
<p>&nbsp;</p>
<p>
<font face=Arial size=2>
&nbsp;
<b>Extra Special Toppings (only one selection allowed):</b> <br>
<input type="radio" name="extra" value="None" onclick="CalculateTotal(this);"> None
<br>
<input type="radio" name="extra" value="Peppers" onclick="CalculateTotal(this);"> Peppers $5.00
<br>
<input type="radio" name="extra" value="Olives" onclick="CalculateTotal(this);"> Olives $6.00
<br>
<input type="radio" name="extra" value="Bacon" onclick="CalculateTotal(this);"> Bacon $7.00
<br>
<br>
<br>
<input type="hidden" name="calculatedTotal" value=0>
<input type="hidden" name="previouslySelectedRadioButton" value=0>
<font size=+1> Your total is: </font><font face=Arial size=2><font size=+1>
<input type="text" name="total" readonly onFocus="this.blur();">
</font></font><font size=+1> </font> <br>
<br>
</font>
</p>
</form>


</body>
</html>

orentha
11-02-2007, 03:54 AM
that works perfectly.
thanks a lot



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum