PDA

View Full Version : Running total with dropdown



shadow29
05-16-2012, 03:34 AM
I have managed to get the check boxes and radio button values adding to the running total, but cannot manage to get the drop down to do the same. Basically all I am trying to do is when small is selected it adds $10 to the running total, medium $15 and large $20.

What I currently have is,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pizza</title>

<script type="text/javascript">

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;
}
}

}




</script>
</head>

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

<table width="770" height="171" border="1" cellpadding="3">

<tr>
<td width="462"><form method="POST" name="selectionForm">
<fieldset>
<legend>NEW PIZZA SELECTION</legend>
(pricing estimate)
<p>Select the size pizza (base price of all types):
<select name="size" id = "size" onchange="CalculateTotal();">
<option value=2.50 selected>small ($10)</option>
<option value=2.50 >medium ($15)</option>
<option value=2.50 >large ($20)</option>

</select>

</p>
Select pizza type:
<table width="292">
<tr>
<td><label>

<input type="radio" name="type" value="radio" id="RadioGroup1_0" />
Supreme
<input type="radio" name="type" value="radio" id="RadioGroup1_1" />
Meat Lovers
<input type="radio" name="type" value="radio" id="RadioGroup1_2" />
Aussie</label></td>
</tr>

</table>
<p>Select additional topping (each topping is $2.50): </p>
<table width="200" border="0" cellspacing="5" cellpadding="1">
<tr>
<td width="70">Ham: </td>
<td width="111">
<input type="checkbox" name="ham" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Cheese: </td>
<td width="111">
<input type="checkbox" name="cheese" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>


<tr>
<td width="70">Olives: </td>
<td width="111">
<input type="checkbox" name="olives" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Peppers: </td>
<td width="111">
<input type="checkbox" name="peppers" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Anchovies: </td>
<td width="111">
<input type="checkbox" name="anchovies" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Salami: </td>
<td width="111">
<input type="checkbox" name="salami" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
</table>
<p>
</p>
<p>Select the type of packaging: </p>
<table width="200">
<tr>
<td>

<input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00


</td>
</tr>
<tr>
<td>

<input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00


</td>
</tr>
<tr>
<td>

<input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00


</td>
</tr>
</table>
<p>
<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();">
<br />
</p>

<p>
<input type="button" name="resetBtn" id="resetBtn" value="Reset" onClick="InitForm();"/>
<input type="button" name="confirmBtn" id="confirmBtn" value="ADD TO
ORDER" />
</p>
</fieldset>


</form></td>

</tr>

<tr>

</tr>
<tr>
</table>

</body>
</html>

vwphillips
05-16-2012, 01:04 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pizza</title>

<script type="text/javascript">

function CalculateTotal(inputItem) {
var frm=inputItem.form;
if (!frm.fields) frm.fields='size,'; // always use these 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=frm[fieldary[zxc0]]; // the input
if (input.type){ // no input array
cal+=input.value*1;
}
else {
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;
}
}

}




</script>
</head>

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

<table width="770" height="171" border="1" cellpadding="3">

<tr>
<td width="462"><form method="POST" name="selectionForm">
<fieldset>
<legend>NEW PIZZA SELECTION</legend>
(pricing estimate)
<p>Select the size pizza (base price of all types):
<select name="size" id = "size" onchange="CalculateTotal(this);">
<option value=10 selected>small ($10)</option>
<option value=15 >medium ($15)</option>
<option value=20 >large ($20)</option>

</select>

</p>
Select pizza type:
<table width="292">
<tr>
<td><label>

<input type="radio" name="type" value="radio" id="RadioGroup1_0" />
Supreme
<input type="radio" name="type" value="radio" id="RadioGroup1_1" />
Meat Lovers
<input type="radio" name="type" value="radio" id="RadioGroup1_2" />
Aussie</label></td>
</tr>

</table>
<p>Select additional topping (each topping is $2.50): </p>
<table width="200" border="0" cellspacing="5" cellpadding="1">
<tr>
<td width="70">Ham: </td>
<td width="111">
<input type="checkbox" name="ham" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Cheese: </td>
<td width="111">
<input type="checkbox" name="cheese" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>


<tr>
<td width="70">Olives: </td>
<td width="111">
<input type="checkbox" name="olives" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Peppers: </td>
<td width="111">
<input type="checkbox" name="peppers" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Anchovies: </td>
<td width="111">
<input type="checkbox" name="anchovies" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
<tr>
<td width="70">Salami: </td>
<td width="111">
<input type="checkbox" name="salami" value=2.50 onclick="CalculateTotal(this);"></td>
</tr>
</table>
<p>
</p>
<p>Select the type of packaging: </p>
<table width="200">
<tr>
<td>

<input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00


</td>
</tr>
<tr>
<td>

<input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00


</td>
</tr>
<tr>
<td>

<input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00


</td>
</tr>
</table>
<p>
<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();">
<br />
</p>

<p>
<input type="button" name="resetBtn" id="resetBtn" value="Reset" onClick="InitForm();"/>
<input type="button" name="confirmBtn" id="confirmBtn" value="ADD TO
ORDER" />
</p>
</fieldset>


</form></td>

</tr>

<tr>

</tr>
<tr>
</table>


</body>
</html>

shadow29
05-16-2012, 01:14 PM
Thank you so much!