Forum Moderators: open
i got a form and im trying to calculate the prices within the form , my problem is i have a couple of different variables so the only thing i can think of is to use a submit buttom . But that then submits the form ....
What is happening is the client uses a drop down for number and type.
as well as add infomration .
Im wondering how i can calculate the price onscreen .
Is it possible to have two different drop downs interact with each other in javascript ?
i.e when you select one , you get on price and when you select another you get another price ?(including the option from the first)
Regards
Malcolm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> two selects
</title>
<script type="text/javascript">
/* global variables */
var myOddValue = 0;
var myEvenValue = 0;
var myTotal = 0;
function getOddPrice()
{
myOddValue = (document.myFormName.odds.value * 1);
alert('My ODD Value is ' + myOddValue);
getTotalValue();
}
function getEvenPrice()
{
myEvenValue = document.myFormName.evens.value * 1;
alert('My EVEN Value is ' + myEvenValue);
getTotalValue();
}
function getTotalValue()
{
myTotal = myOddValue + myEvenValue;
alert('My Total Value is ' + myTotal);
myTotal = 0;
alert('My Total Value is now ' + myTotal);
}
</script>
</head>
<body>
<form name="myFormName" method="get" action=" ">
<h1>
get price from two selects
</h1>
<noscript>
<div>
To see this section, Javascript must be enabled in your browser
</div>
</noscript>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</p>
<div>
<select name="odds"
onChange="getOddPrice()">
<option value="0">Please select an ODD number</option>
<option value="1">One</option>
<option value="3">Three</option>
<option value="5">Five</option>
</select>
<select name="evens"
onChange="getEvenPrice()">
<option value="0">Please select an EVEN number</option>
<option value="2">Two</option>
<option value="4">Four</option>
<option value="6">Six</option>
</select>
</div>
<p>
Aliquam vel mauris. Fusce ultrices, mi et pellentesque
</p>
</form>
<p>
Nam commodo libero nec justo. Sed diam risus, suscipit eu
</p>
</body>
</html>
