PDA

View Full Version : Real Time Calculations Using Javascript



gazza58
05-21-2014, 07:31 PM
Hello

I'm looking to create a form which does Real Time Calculations on line to reach a total value. I have found a script which appears to fit my requirements but am having problems modifying and was hoping someone could assist me as to where I'm going wrong

The Code is as follows




HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Skittle Form</title>
<script type="text/javascript" src="js/salecalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" id="saleform" onsubmit="return false;">
<div>
<div class="cont_order">

<fieldset>

<div align="center"><table width="675" cellpadding="0" cellspacing="4">
<tr>

<td width="225" align="center" valign="top">&nbsp;</td>
<td width="250" align="center" valign="top"><b>SIZE</b></td>
<td width="100" align="center" valign="top"><b>QTY</b></td>
<td width="100" align="center" valign="top"><b>PRICE</b></td>

</tr>
<tr>

<td><label>LIGNUM VITAE</label></td>

<td>

<select id="Lignum" name='Lignum' onchange="calculateTotal1()">
<option value="None">Select Size</option>
<option value="LV4.75">Set of 3 - 4 3/4"</option>
<option value="LV4.875">Set of 3 - 4 7/8"</option>
<option value="LV5">Set of 3 - 5"</option>
<option value="LV5.25">Set of 3 - 5 1/4"</option>
<option value="LV5.5">Set of 3 - 5 1/2"</option>
</select>

</td>

<td>

<select id="Quantity" name='Quantity' onchange="calculateTotal1()">
<option value="L0">QTY</option>
<option value="L0">0</option>
<option value="L1">1</option>
<option value="L2">2</option>
<option value="L3">3</option>
<option value="L4">4</option>
<option value="L5">5</option>
</select>

</td>


<td>

<div id="LignumPrice"></div>

</td>

</tr>
<tr>

<td><label>HARD RUBBER</label></td>

<td>

<select id="HardRubber" name='HardRubber' onchange="calculateTotal2()">
<option value="None">Select Size</option>
<option value="HR4W">Set of 3 - 4" White</option>
<option value="HR4P">Set of 3 - 4" Pink</option>
<option value="HR4.5W">Set of 3 - 4 1/2" White</option>
<option value="HR4.5P">Set of 3 - 4 1/2" Pink</option>
<option value="HR5W">Set of 3 - 5" White</option>
<option value="HR5P">Set of 3 - 5" Pink</option>
</select>

</td>

<td>

<select id="Quantity" name='Quantity' onchange="calculateTotal2()">
<option value="HR0">QTY</option>
<option value="HR0">0</option>
<option value="HR1">1</option>
<option value="HR2">2</option>
<option value="HR3">3</option>
<option value="HR4">4</option>
<option value="HR5">5</option>
</select>

</td>


<td>

<div id="HardRubberPrice"></div>

</td>

</tr>
</table>

</fieldset>
</div>

</form>
</div><!--End of wrap-->

</body>
</html>

JavaScript


var Lignum_prices= new Array();
Lignum_prices["None"]=0;
Lignum_prices["LV4.75"]=180;
Lignum_prices["LV4.875"]=180;
Lignum_prices["LV5"]=180;
Lignum_prices["LV5.25"]=180;
Lignum_prices["LV5.5"]=180;

//This function finds the Lignum price based on the
//drop down selection
function getLignumPrice()
{
var cakeLignumPrice=0;
//Get a reference to the form id="saleform"
var theForm = document.forms["saleform"];
//Get a reference to the select id="Lignum"
var selectedLignum = theForm.elements["Lignum"];

//set cakeLignum Price equal to value user chose
//For example Lignum_prices["Lemon".value] would be equal to 5
cakeLignumPrice = Lignum_prices[selectedLignum.value];

//finally we return cakeLignumPrice
return cakeLignumPrice;
}


var Quantity_prices= new Array();
Quantity_prices["L0"]=0;
Quantity_prices["L1"]=1;
Quantity_prices["L2"]=2;
Quantity_prices["L3"]=3;
Quantity_prices["L4"]=4;
Quantity_prices["L5"]=5;

//This function finds the Quantity price based on the
//drop down selection
function getQuantityPrice()
{
var cakeQuantityPrice=0;
//Get a reference to the form id="saleform"
var theForm = document.forms["saleform"];
//Get a reference to the select id="Quantity"
var selectedQuantity = theForm.elements["Quantity"];

//set cakeQuantity Price equal to value user chose
//For example Quantity_prices["Lemon".value] would be equal to 5
cakeQuantityPrice = Quantity_prices[selectedQuantity.value];

//finally we return cakeQuantityPrice
return cakeQuantityPrice;
}

function calculateTotal1()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getLignumPrice() * getQuantityPrice();

//display the result
var divobj = document.getElementById('LignumPrice');
divobj.style.display='block';
divobj.innerHTML = ""+cakePrice;

}

function hideTotal()
{
var divobj = document.getElementById('LignumPrice');
divobj.style.display='none';
}


var HardRubber_prices= new Array();
HardRubber_prices["None"]=0;
HardRubber_prices["HR0"]=0;
HardRubber_prices["HR4W"]=120;
HardRubber_prices["HR4P"]=130;
HardRubber_prices["HR4.5W"]=140;
HardRubber_prices["HR4.5P"]=150;
HardRubber_prices["HR5W"]=160;
HardRubber_prices["HR5P"]=170;

//This function finds the HardRubber price based on the
//drop down selection
function getHardRubberPrice()
{
var cakeHardRubberPrice=0;
//Get a reference to the form id="saleform"
var theForm = document.forms["saleform"];
//Get a reference to the select id="HardRubber"
var selectedHardRubber = theForm.elements["HardRubber"];

//set cakeHardRubber Price equal to value user chose
//For example HardRubber_prices["Lemon".value] would be equal to 5
cakeHardRubberPrice = HardRubber_prices[selectedHardRubber.value];

//finally we return cakeHardRubberPrice
return cakeHardRubberPrice;
}


var Quantity_prices= new Array();
Quantity_prices["0"]=0;
Quantity_prices["1"]=1;
Quantity_prices["2"]=2;
Quantity_prices["3"]=3;
Quantity_prices["4"]=4;
Quantity_prices["5"]=5;

//This function finds the Quantity price based on the
//drop down selection
function getQuantityPrice()
{
var cakeQuantityPrice=0;
//Get a reference to the form id="saleform"
var theForm = document.forms["saleform"];
//Get a reference to the select id="Quantity"
var selectedQuantity = theForm.elements["Quantity"];

//set cakeQuantity Price equal to value user chose
//For example Quantity_prices["Lemon".value] would be equal to 5
cakeQuantityPrice = Quantity_prices[selectedQuantity.value];

//finally we return cakeQuantityPrice
return cakeQuantityPrice;
}

function calculateTotal2()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getHardRubberPrice() * getQuantityPrice();

//display the result
var divobj = document.getElementById('HardRubberPrice');
divobj.style.display='block';
divobj.innerHTML = ""+cakePrice;

}

function hideTotal()
{
var divobj = document.getElementById('HardRubberPrice');
divobj.style.display='none';
}

CSS

#wrap{
width:400px;
margin:0 auto;
text-align:left;
margin-top:8px;
padding:5px;
background:#fff;
font-family:AvenirLTStd, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:16px;
}
#wrap .cont_details fieldset,.cont_order fieldset{
margin:10px;
padding:20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#wrap legend{
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
font-style:italic;
padding-bottom:10px;
}
#wrap .cont_details input{
margin-bottom:10px;
color:#000;
}
#wrap .input1:hover,.input1:active{

}
#wrap label{
display:block;
font-size:12px;
color:#000;
font-weight:bold;
}
#wrap label.inlinelabel
{
display:inline;
}
#wrap .cont_order input{
margin-bottom:5px;
}
#wrap .cont_order p{
padding-top:5px;
}

#wrap input[type="radio"]
{
margin-top:8px;
margin-bottom:8px;
}

#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}

#wrap input#submit
{
margin:10px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}

#wrap div#LignumPrice
{
padding:10px;
font-weight:bold;
background-color:#ff0;
}

#wrap label.radiolabel
{
font-weight:normal;
display:inline;
}



If I have one line the script woks (i.e. Calculates for Lignum), but by adding the Second Line the additions don't quite work correctly

Any assistance or if there is a better script it would be appreciated

Many Thanks

vwphillips
05-22-2014, 09:57 AM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
#wrap{
width:400px;
margin:0 auto;
text-align:left;
margin-top:8px;
padding:5px;
background:#fff;
font-family:AvenirLTStd, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:16px;
}
#wrap .cont_details fieldset,.cont_order fieldset{
margin:10px;
padding:20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#wrap legend{
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
font-style:italic;
padding-bottom:10px;
}
#wrap .cont_details input{
margin-bottom:10px;
color:#000;
}
#wrap .input1:hover,.input1:active{

}
#wrap label{
display:block;
font-size:12px;
color:#000;
font-weight:bold;
}
#wrap label.inlinelabel
{
display:inline;
}
#wrap .cont_order input{
margin-bottom:5px;
}
#wrap .cont_order p{
padding-top:5px;
}

#wrap input[type="radio"]
{
margin-top:8px;
margin-bottom:8px;
}

#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}

#wrap input#submit
{
margin:10px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}

#wrap div#LignumPrice
{
padding:10px;
font-weight:bold;
background-color:#ff0;
}

#wrap label.radiolabel
{
font-weight:normal;
display:inline;
}/*<![CDATA[*/

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html

You are free to use the code in Commercial or non-commercial projects
*/

//Set up an associative array
//The keys represent the Lignum type
//The value represents the cost of the Lignum i.e. Lemon Lignum is $5,Dobash Lignum is $9
//We use this this array when the user selects a Lignum from the form
var Lignum_prices= new Array();
Lignum_prices["None"]=0;
Lignum_prices["LV4.75"]=180;
Lignum_prices["LV4.875"]=180;
Lignum_prices["LV5"]=180;
Lignum_prices["LV5.25"]=180;
Lignum_prices["LV5.5"]=180;



//Set up an associative array
//The keys represent the Quantity type
//The value represents the cost of the Quantity i.e. Lemon Quantity is $5,Dobash Quantity is $9
//We use this this array when the user selects a Quantity from the form
var Quantity_prices= new Array();
Quantity_prices["L0"]=0;
Quantity_prices["L1"]=1;
Quantity_prices["L2"]=2;
Quantity_prices["L3"]=3;
Quantity_prices["L4"]=4;
Quantity_prices["L5"]=5;

var Lignum2_prices= new Array();
Lignum2_prices["None"]=0;
Lignum2_prices["LV4.75"]=179;
Lignum2_prices["LV4.875"]=181;
Lignum2_prices["LV5"]=182;
Lignum2_prices["LV5.25"]=183;
Lignum2_prices["LV5.5"]=184;

var Quantity2_prices= new Array();
Quantity2_prices["L0"]=0;
Quantity2_prices["L1"]=1;
Quantity2_prices["L2"]=2;
Quantity2_prices["L3"]=3;
Quantity2_prices["L4"]=4;
Quantity2_prices["L5"]=5;


function calculateTotal1(id1,id2,id3){
var s1=document.getElementById(id1),a1=window[id1+'_prices'],s2=document.getElementById(id2),a2=window[id2+'_prices'],t=document.getElementById(id3),v1,v2;
if (s1&&a1 instanceof Array,s2&&a2 instanceof Array&&t){
v1=a1[s1.value]||0;
v2=a2[s2.value]||0
t.style.display='block';
t.innerHTML = ""+v1*v2;
}
}

/*]]>*/
</script>

</head>

<body>
<form action="" id="saleform" onsubmit="return false;">
<div>
<div class="cont_order">

<fieldset>

<div align="center">
<table width="675" cellpadding="0" cellspacing="4">
<tr>

<td width="225" align="center" valign="top">&nbsp;</td>
<td width="250" align="center" valign="top"><b>SIZE</b></td>
<td width="100" align="center" valign="top"><b>QTY</b></td>
<td width="100" align="center" valign="top"><b>PRICE</b></td>

</tr>
<tr>

<td width="225" align="center" valign="top"><label >LIGNUM VITAE</label></td>

<td width="250" align="center" valign="top">

<select id="Lignum" name='Lignum' onchange="calculateTotal1('Lignum','Quantity','LignumPrice')">
<option value="None">Select Size</option>
<option value="LV4.75">Set of 3 - 4 3/4"</option>
<option value="LV4.875">Set of 3 - 4 7/8"</option>
<option value="LV5">Set of 3 - 5"</option>
<option value="LV5.25">Set of 3 - 5 1/4"</option>
<option value="LV5.5">Set of 3 - 5 1/2"</option>
</select>

</td>

<td width="100" align="center" valign="top">

<select id="Quantity" name='Quantity' onchange="calculateTotal1('Lignum','Quantity','LignumPrice')">
<option value="L0">QTY</option>
<option value="L0">0</option>
<option value="L1">1</option>
<option value="L2">2</option>
<option value="L3">3</option>
<option value="L4">4</option>
<option value="L5">5</option>
</select>

</td>


<td width="100" align="center" valign="top">

<div id="LignumPrice"></div>

</td>

</tr>
</table>

</fieldset>
<fieldset>

<div align="center">
<table width="675" cellpadding="0" cellspacing="4">
<tr>

<td width="225" align="center" valign="top">&nbsp;</td>
<td width="250" align="center" valign="top"><b>SIZE</b></td>
<td width="100" align="center" valign="top"><b>QTY</b></td>
<td width="100" align="center" valign="top"><b>PRICE</b></td>

</tr>
<tr>

<td width="225" align="center" valign="top"><label >LIGNUM VITAE 2</label></td>

<td width="250" align="center" valign="top">

<select id="Lignum2" name='Lignum2' onchange="calculateTotal1('Lignum2','Quantity2','LignumPrice2')">
<option value="None">Select Size</option>
<option value="LV4.75">Set of 3 - 4 3/4"</option>
<option value="LV4.875">Set of 3 - 4 7/8"</option>
<option value="LV5">Set of 3 - 5"</option>
<option value="LV5.25">Set of 3 - 5 1/4"</option>
<option value="LV5.5">Set of 3 - 5 1/2"</option>
</select>

</td>

<td width="100" align="center" valign="top">

<select id="Quantity2" name='Quantity2' onchange="calculateTotal1('Lignum2','Quantity2','LignumPrice2')">
<option value="L0">QTY</option>
<option value="L0">0</option>
<option value="L1">1</option>
<option value="L2">2</option>
<option value="L3">3</option>
<option value="L4">4</option>
<option value="L5">5</option>
</select>

</td>


<td width="100" align="center" valign="top">

<div id="LignumPrice2"></div>

</td>

</tr>
</table>

</fieldset>
</div>

</form>
</div><!--End of wrap-->
</body>

</html>