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.

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

Thread: Conditional HTML Form Fields Help

Thread Tools

Search Thread

Conditional HTML Form Fields Help

Bookmarks

Bookmarks

Posting Permissions