PDA

View Full Version : Conditional HTML Form Fields Help



jughead47
09-30-2011, 01:23 PM
Need help writing this form for class registrations

CONDITIONS:
If a person selects one or multiple Friday Classes OR one or multiple Saturday Classes the cost is $99. (One Day Package $99)
If a person selects one or multiple Friday Classes AND one or multiple Saturday Class the cost is $159. (Two Day Package $159)
If a person then adds a Sunday class we add $39 to the total. (Add Sunday $39)
If a person just selects a Sunday class price is only $39.

And add the total costs for each attendee.

(EXAMPLES: two Friday classes and a Sunday class would total $138; Two Friday Classes, One Saturday, and Sunday Class would be $198)

So far I've only gotten the first Friday and Saturday Class 1's to work with some help.




<!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>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
font-size: 14px
}
-->
</style>
</head>
<body>
<div>
<div class="style2">
<form name="form">
<p class="style1"><span class="style1">Friday Class 1:</span>
<select id="fridayClass1-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p class="style1"><span class="style1">Friday Class 2:</span>
<select id="fridayClass1-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p class="style1"> <span class="style1">Saturday Class 1:</span>
<select id="saturdayClass1-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p class="style1"><span class="style1">Saturday Class 2:</span>
<select id="saturdayClass1-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p class="style1"> <span class="style1">Sunday Class 1:</span>
<select id="sundayClass1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>

<div class="style1"><span class="style1"> Cost For Attendee 1:</span>
<input type="text" id="totalCost1" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;" /></div>


<span class="style1"><br />
<br />

<div>
</span>
<div class="style1">
<p><span class="style1">Friday Class 1:</span>
<select id="fridayClass2-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p><span class="style1">Friday Class 2:</span>
<select id="fridayClass2-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class 1:</span>
<select id="saturdayClass2-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p><span class="style1">Saturday Class 2:</span>
<select id="saturdayClass2-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Sunday Class:</span>
<select id="sundayClass2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
</div>
<div class="style1"><span class="style1"> Cost For Attendee 2:</span>
<input type="text" id="totalCost2" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/></div>

<div><span class="style1"> <br />
<br />
TOTAL COST:</span>
<input type="text" id="totalCostAll" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/>
<br />
<br />
<br />
</div>

<script>
window.onload = function () {

// Variable declarations and a $-alias for document.getElementById;
var $ = function(x){return document.getElementById(x)},
fridayOneOne = $('fridayClass1-1'),
fridayOneTwo = $('fridayClass1-2'),
saturdayOneOne = $('saturdayClass1-1'),
saturdayOneTwo = $('saturdayClass1-2'),
sundayOne = $('sundayClass1-2'),
totalCostOne = $('totalCost1'),

fridayTwoOne = $('fridayClass2-1'),
fridayTwoTwo = $('fridayClass2-2'),
saturdayTwoOne = $('saturdayClass2-1'),
saturdayTwoTwo = $('saturdayClass2-2'),
sundayTwo = $('sundayClass2'),
totalCostTwo = $('totalCost2'),

totalCostAll = $('totalCostAll');

// Onchange events for select elements
fridayOneOne.onchange = fridayOneTwo.onchange = saturdayOneOne.onchange = function () {
totalCostOne.value = '$' + [0,99,159][1*(fridayOneOne.selectedIndex > 0) + 1*(saturdayOneOne.selectedIndex > 0)] + '.00';
calcTotal();
};
fridayTwoOne.onchange = saturdayTwoOne.onchange = function () {
totalCostTwo.value = '$' + [0,99,159][1*(fridayTwoOne.selectedIndex > 0) + 1*(saturdayTwoOne.selectedIndex > 0)] + '.00';
calcTotal();
};

// A function to calculate the total
var calcTotal = function(){
totalCostAll.value = '$'
+ (totalCostOne.value.split('$').join('')/1 + totalCostTwo.value.split('$').join('')/1)
+ '.00';
}
};
</script>
</form>
</div>
</body>
</html>