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,

Code:

<!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

Code:

<!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!

Thread: Running total with dropdown

Thread Tools

Search Thread

Running total with dropdown

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions