CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Real Time Calculations Using Javascript

  1. 05-21-2014, 07:31 PM #1
    gazza58
    gazza58 is offline Junior Coders
    Join Date
    Dec 2012
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Real Time Calculations Using Javascript

    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

    Code:
    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
    Reply With Quote Reply With Quote
  2. 05-22-2014, 09:57 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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" 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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Real-Time notification pop ups?
    By mingalls in forum Looking for such a script or service
    Replies: 2
    Last Post: 02-02-2009, 08:44 PM
  2. Real time hit counter
    By kwahamot in forum Flash
    Replies: 6
    Last Post: 01-16-2008, 02:50 AM
  3. Form Submssion in somewhat real-time
    By darkus in forum Looking for such a script or service
    Replies: 6
    Last Post: 12-15-2007, 08:19 PM
  4. real-time cooking with javascript
    By VatsaL in forum The lounge
    Replies: 1
    Last Post: 01-26-2007, 06:09 AM
  5. [DHTML] Real Time Syntax Highlighting JavaScript
    By fermads in forum Submit a DHTML or CSS code
    Replies: 12
    Last Post: 08-20-2006, 08:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules