JavaScript - Order Form With Total Price Calculation

<script>
function BDWcalc ()
  {
    var listeners = document.getElementById('listeners').value;
    var bitrate = document.getElementById('bitrate').value;
    var hours = document.getElementById('hours').value;
    var days = document.getElementById('days').value;
    var total = document.getElementById('BDWTotal');
    
    var sum = days*hours*3600*bitrate/8*listeners/1024/1024;
    total.value = sum.toFixed(2)+" GB";
  }
</script>

<script type="text/javascript" language="JavaScript" src='javascript/BDWcalc.js'></script>

<table width="530" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <th scope="col">Listeners</th>
    <th scope="col">Bitrate(quality)</th>
    <th scope="col">Hours per day </th>
    <th scope="col">Days per month </th>
    <th scope="col">Total per month </th>
    <th scope="col">Action</th>
  </tr>
  <tr>
    <th scope="col"><span class="cell" style="width: 75px;">
      <input name="text" type="text" id="listeners" style="margin: 4px 2px 0pt; width: 65px;" onchange="BDWcalc();" value="10" size="20" />
    </span></th>
    <th scope="col"><span class="cell_v">
    <select name="select2" class="BDWbox" id="select" onchange="BDWcalc();">
      <option value="24">24 kbps</option>
      <option value="32">32 kbps</option>
      <option value="48">48 kbps</option>
      <option value="56">56 kbps</option>
      <option value="64" selected="selected">64 kbps</option>
      <option value="80">80 kbps</option>
      <option value="96">96 kbps</option>
      <option value="112">112 kbps</option>
      <option value="128">128 kbps</option>
      <option value="160">160 kbps</option>
      <option value="192">192 kbps</option>
      <option value="224">224 kbps</option>
      <option value="256">256 kbps</option>
      <option value="320">320 kbps</option>
      <option value="512">512 kbps</option>
      <option value="768">768 kbps</option>
      <option value="1536">1.5 mbps</option>
    </select>
    </span></th>
    <th scope="col"><span class="cell_v">
    <select name="select3" class="BDWbox" id="select2" onchange="BDWcalc();">
      <option value="1">1 hour</option>
      <option value="2">2 hours</option>
      <option value="3">3 hours</option>
      <option value="4">4 hours</option>
      <option value="5">5 hours</option>
      <option value="6">6 hours</option>
      <option value="7">7 hours</option>
      <option value="8">8 hours</option>
      <option value="9">9 hours</option>
      <option value="10" selected="selected">10 hours</option>
      <option value="11">11 hours</option>
      <option value="12">12 hours</option>
      <option value="13">13 hours</option>
      <option value="14">14 hours</option>
      <option value="15">15 hours</option>
      <option value="16">16 hours</option>
      <option value="17">17 hours</option>
      <option value="18">18 hours</option>
      <option value="19">19 hours</option>
      <option value="20">20 hours</option>
      <option value="21">21 hours</option>
      <option value="22">22 hours</option>
      <option value="23">23 hours</option>
      <option value="24">24 hours</option>
    </select>
    </span></th>
    <th scope="col"><span class="cell_v">
    <select name="select4" class="BDWbox" id="select3" onchange="BDWcalc();">
      <option value="1">1 day</option>
      <option value="2">2 days</option>
      <option value="3">3 days</option>
      <option value="4">4 days</option>
      <option value="5">5 days</option>
      <option value="6">6 days</option>
      <option value="7">7 days</option>
      <option value="8">8 days</option>
      <option value="9">9 days</option>
      <option value="10">10 days</option>
      <option value="11">11 days</option>
      <option value="12">12 days</option>
      <option value="13">13 days</option>
      <option value="14">14 days</option>
      <option value="15" selected="selected">15 days</option>
      <option value="16">16 days</option>
      <option value="17">17 days</option>
      <option value="18">18 days</option>
      <option value="19">19 days</option>
      <option value="20">20 days</option>
      <option value="21">21 days</option>
      <option value="22">22 days</option>
      <option value="23">23 days</option>
      <option value="24">24 days</option>
      <option value="25">25 days</option>
      <option value="26">26 days</option>
      <option value="27">27 days</option>
      <option value="28">28 days</option>
      <option value="29">29 days</option>
      <option value="30">30 days</option>
    </select>
    </span></th>
     <th scope="col"><span class="cell_v" style="width: 160px;">
    <input name="text2" type="text" id="text2" style="margin: 4px 2px 0pt; width: 90px;" value="41.19 GB" size="20" />
    </span></th>
    <th scope="col"><a href='javascript:BDWcalc();'>Update</a></th>
  </tr>
</table>

<script type='text/javascript'>
<!--
function writeSummary() {
	var desiredquantity = document.orders.value;
	
	if (desiredquantity='')
	{
		alert('Please enter a value for the desired quantity');
		return false;
	}
		else if (desiredquantity='value<0')
		{
			alert('Please enter a value for the desired quantity that is greater than 0');
			return false;
		}
			else (desiredquantity='value>0')
			{
				alert('Thank you for your order!');
				return true;
			}
}
//-->
</script>

<script type="text/javascript" language="javascript">

function autocalearn(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotEarn = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotEarn += val; //accumulate
}
}
var tot=Number(TotEarn) + Number(document.getElementById('Amount').value);
oForm.TotEarn.value = tot.toFixed(2);
//oForm.TotEarn.value = TotEarn.toFixed(2); //out
 
}

</script>
<!--Total Deduction AutoCompute-->
<script type="text/javascript" language="javascript">

function autocalded(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotalDed = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotalDed += val; //accumulate
}
}
//oForm.TotalDed.value = TotalDed.toFixed(2); //out

var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value);
oForm.TotalDed.value = totded.toFixed(2);
}

</script>

window.onload = startForm;

function todayTxt() {
   var Today = new Date();
   return Today.getMonth() + 1 + "-" + Today.getDate() + "-" + Today.getFullYear();
}
function startForm(){
	document.forms[0].date.value = todayTxt();
	document.forms[0].prod.focus();

	document.forms[0].prod.onchange = calcPrice;
	document.forms[0].qty.onchange = calcPrice;
	
	for (var i=0; i<document.forms[0].shipType.length; i++) {
		document.forms[0].shipType[i].onclick = calcShipping;
	}
}
function calcPrice() {
	product=document.forms[0].prod;
	pIndex=product.selectedIndex;
	productPrice=product.options[pIndex].value; //returns the price of the selected product

	 quantity=document.forms[0].qty;
	 qIndex=quantity.selectedIndex;
	 quantityOrdered=quantity.options[qIndex].value; //returns the index of the selected quantity

	document.forms[0].price.value = eval(product.Price*quantityOrdered);  //cost is equal to product price multiplied by quantity ordered
}

function calcShipping() {
	document.forms[0].ship.value = this.value;}

function calcTotal() {
	priceVal=parseFloat(document.forms[0].price.value);
	shipVal=parseFloat(document.forms[0].ship.value);
	document.forms[0].sub.value = priceVal + shipVal;
	
	taxVal = 0.05*(priceVal + shipVal);
	document.forms[0].tax.value = taxVal;
	
	document.forms[0].tot.value = priceVal + shipVal + taxVal;
}
<html>
<body>
   <form id="form1" method="post" action="form2.htm">

   <div id="links">
      <a href="#" class="newgroup">Home Page</a>
      <a href="#">Product Catalog</a>
      <a href="#">Order Form</a>
      <a href="#">Maps Online</a>
      <a href="#">Contact Us</a>
      <a href="#" class="newgroup">Countries</a>
      <a href="#">States</a>
      <a href="#">National Parks</a>
      <a href="#">Hiking Trails</a>
      <a href="#">Cities</a>
      <a href="#">Astronomical</a>
      <a href="#">Natural</a>
      <a href="#" class="newgroup">GoMap 1.0</a>
      <a href="#">Drive Planner 2.0</a>
      <a href="#">Hiker 1.0</a>
      <a href="#">G-Receiver I</a>
      <a href="#">G-Receiver II</a>
      <a href="#">G-Receiver III</a>
      <a href="#" class="newgroup">Downloads</a>
      <a href="#">Tech Support</a>
      <a href="#">FAQs</a>
   </div>

   <div id="main">
    <p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>
      <h1>Order Form</h1>
      <p id="datep">
         <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy" readonly="readonly" />
      </p>

     <fieldset>
        <legend>Select a Product</legend>

        <table>
           <tr>
              <td class="labelcell">Product</td>
              <td class="inputcell">
              <select name="prod" id="prod">
                 <option value="0">Products from GPS-ware</option>
                 <option value="19.95">GoMap 1.0 ($19.95)</option>
                 <option value="29.95">Drive Planner 2.0 ($29.95)</option>
                 <option value="29.95">Hiker 1.0 ($29.95)</option>
                 <option value="149.50">G-Receiver I ($149.50)</option>
                 <option value="199.50">G-Receiver II ($199.50)</option>
                 <option value="249.50">G-Receiver III ($249.50)</option>
              </select>
     
              <select name="qty" id="qty">
                 <option value="0">Quantity</option>
                 <option value="1">1</option><option value="2">2</option><option value="3">3</option>
                 <option value="4">4</option><option value="5">5</option><option value="6">6</option>
                 <option value="7">7</option><option value="8">8</option><option value="9">9</option>
                 <option value="10">10</option>
              </select>
              </td>
              <td class="outcell">
                 <input class="num" name="price" id="price" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td class="labelcell">Shipping</td>
              <td>
              <p><input type="radio" name="shipType" id="ship1" value="4.95" />
                 <label for="ship1">Standard (4-6 business days): $4.95</label>
              </p>
              <p><input type="radio" name="shipType" id="ship2" value="8.95" />
                 <label for="ship2">Express (2 days): $8.95</label>
              </p>
              <p><input type="radio" name="shipType" id="ship3" value="12.95" />
                 <label for="ship3">Next Day (1 day): $12.95</label>
              </p>
              </td>

              <td class="outcell">
                 <input class="num" name="ship" id="ship" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">Subtotal</td>
              <td class="outcell">
                 <input class="num" name="sub" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">Tax (5%)</td>
              <td class="outcell">
                 <input class="num" name="tax" id="tax" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">TOTAL</td>
              <td class="outcell">
                 <input class="num" name="tot" id="tot" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>
        </table>

     </fieldset>

     <p id="formbuttons">
        <input type="reset"  name="cancelb" id="cancelb" value="Cancel" />
        <input type="submit" name="nextb" id="nextb" value="Next" />
    </p>

   </div>

   </form>

</body>
</html>

<script type="text/javascript">
		function startCalc(){
  		interval = setInterval("calc()",1);
		}
		function calc(){
		q1 = document.apply.appfee.value = 11;
		q2 = document.apply.memfee.value = 20;
		q3 = document.apply.levy.value;
		q4 = document.apply.donation.value;
		document.apply.total.value = (q1*1) + (q2*1) + (q3*1) + (q4*1)
		}
		function stopCalc(){
  		clearInterval(interval);
		}
		</script>

<form name="apply" action="" method="post" onsubmit="return validate(apply)">
<table style="width:680px;">
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">Application Fee:</td>
				<td style="text-align:left; white-space:nowrap; width:441px">$<input type="text" readonly value="" name="appfee" style="width:17px; border:0; font:11px verdana; color:#006;margin-bottom:5px;"></td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">Annual Memebership Fee:</td>
				<td style="text-align:left; white-space:nowrap;">$<input type="text" readonly value="" name="memfee" style="width:17px; border:0; font:11px verdana; color:#006;margin-bottom:5px;"></td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">* Optional Annual Levy:</td>
				<td style="text-align:left;">
					$<select name="levy" onFocus="startCalc();" onBlur="stopCalc();">
					<option selected>0</option>
					<option value="22">22</option>
					<option value="44">44</option>
					<option value="66">66</option>
					<option value="88">88</option>
					<option value="110.00">110</option>
					</select>
				</td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">* Optional Donation:</td>
				<td>$<input type="text" name="donation" value="" onFocus="startCalc();" onBlur="stopCalc();" style="font:11px verdana; color:#006;margin-bottom:5px; width:80px;"></td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;"><b>TOTAL:</b></td>
				<td white-space:nowrap;><b>$<input type="text" name="total" style="width:17px; border:0; font:bold 11px verdana; color:#006;margin-bottom:6px;"></b></td>
			</tr>
		</table>
</form>

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> R359</td></tr>

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

<!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>
	<!-- Brooks Rogalski
		December 6, 2010 -->
<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
	content="text/html; charset=iso-8859-1" />
	
	<script type = "text/javascript">
		/* <![CDATA[ */
		
			//image slideshow function
			
			var interval = 4000; // delay between rotating images
			var random_display = 1; // 0 = no, 1 = yes
			var pause = false;
			var image_index = 0;
			
			image_list = new Array();
			image_list[image_index++] = new imageItem("fishing.jpg");
			image_list[image_index++] = new imageItem("biking.jpg");
			image_list[image_index++] = new imageItem("climbing.jpg");
			image_list[image_index++] = new imageItem("kayaking.jpg");
			image_list[image_index++] = new imageItem("scuba.jpg");
			
			var number_of_image = image_list.length;
			
			function imageItem(image_location) {
			
				this.image_item = new Image();
				this.image_item.src = image_location;
			}
			
			function get_ImageItemLocation(imageObj) {
				return(imageObj.image_item.src)
			}

			function generate(x, y) {
			
				var range = y - x + 1;
				return Math.floor(Math.random() * range) + x;
			}

			function getNextImage() {
				if (pause == true) return;
				
				if (random_display) {
					image_index = generate(0, number_of_image-1);
				}
				else {
					image_index = (image_index+1) % number_of_image;
				}
				
				var new_image = get_ImageItemLocation(image_list[image_index]);
				return(new_image);
			}

			function rotateImage(place) {
				
				var new_image = getNextImage();
				
				document[place].src = new_image;
				
				var recur_call = "rotateImage('"+place+"')";
				
				setTimeout(recur_call, interval);
			}

			//check valid pickup date
			
			function checkValidPDate(which) {
				which = which.replace(/[-:,\.]/g,"/");
				which = which.replace(/[^0-9\/]/,"");
				
				var dt = which.split("/");
				var yr = dt[2];
				
				if (!yr) {yr = 9999}
				if (yr.length == 2) {yr = parseInt(yr) + 2000}
				if ((yr < 2010) || ( yr > 2020)) {
					alert ("Invalid Year or Date Format!");
					document.getElementById('dateIn').value = "";  // clear the field
					setTimeout("document.getElementById('dateIn').focus()", 25);  // and refocus on it
					return false;
				}

				var mm = dt[0]-1;
				var mmx = dt[0];
				var dd = dt[1];
				var nd = new Date();
				nd.setFullYear(yr,mm,dd);  // YYYY,MM(0-11),DD
				var ndmm = nd.getMonth();
			
				if (ndmm != mm) {
					alert (mmx + "/" + dd + "/" + yr  + " is NOT a Valid Date!");
					document.getElementById("dateIn").value = ""; // clear the field
					setTimeout("document.getElementById('dateIn').focus()", 25);  // and refocus on it
					return false; 
				}
				else {
					alert (mmx + "/" + dd + "/" + yr  + " is a Valid Date!");  // for testing
				}

				var reserveDate = new Date(yr,mm,dd);
				var mydate = new Date();
				mydate.setDate(mydate.getDate()+2);  //  Two CLEAR days ahead - NB mydate is HRS:MNS:SECS so same date is a problem

				if (reserveDate < mydate) {
					window.alert("Reservations need to be at least two clear days in advance.");
					document.getElementById("dateIn").value = ""; // clear the field
					setTimeout("document.getElementById('dateIn').focus()", 25);  // and refocus on it
				}
			}
			
			//check valid return date
			
			function checkValidRDate(which) {
				which = which.replace(/[-:,\.]/g,"/");
				which = which.replace(/[^0-9\/]/,"");
				
				var dt = which.split("/");
				var yr = dt[2];
				
				if (!yr) {yr = 9999}
				if (yr.length == 2) {yr = parseInt(yr) + 2000}
				if ((yr < 2010) || ( yr > 2020)) {
					alert ("Invalid Year or Date Format!");
					document.getElementById('dateOut').value = "";  // clear the field
					setTimeout("document.getElementById('dateOut').focus()", 25);  // and refocus on it
					return false;
				}

				var mm = dt[0]-1;
				var mmx = dt[0];
				var dd = dt[1];
				var nd = new Date();
				nd.setFullYear(yr,mm,dd);  // YYYY,MM(0-11),DD
				var ndmm = nd.getMonth();
			
				if (ndmm != mm) {
					alert (mmx + "/" + dd + "/" + yr  + " is NOT a Valid Date!");
					document.getElementById("dateOut").value = ""; // clear the field
					setTimeout("document.getElementById('dateOut').focus()", 25);  // and refocus on it
					return false; 
				}
				else {
					alert (mmx + "/" + dd + "/" + yr  + " is a Valid Date!");  // for testing
				}
				
				if(document.forms[0].returnDate.value <= document.forms[0].pickupDate.value){
					window.alert("Please choose later date");
					valid=false;
					return false;
				}
			}
			//validate form functions
			
			function validateForm() {
			
				var valid = true;
				
				//validate equipment 
				
				if (document.forms[0].equipment.selectedIndex == 0) {
					window.alert("Please select your equipment type.");
					document.forms[0].equipment.focus();
					return false;
				}
				
				//validate pick-up time hours
				
				if (document.forms[0].pickupHours.selectedIndex == 0) {
					window.alert("Please select the number of hours for pick-up time.");
					document.forms[0].pickupHours.focus();
					return false;
				}
				
				//validate pick-up time minutes
				
				if (document.forms[0].pickupMinutes.selectedIndex == 0) {
					window.alert("Please select the number of minutes for pick-up time.");
					document.forms[0].pickupMinutes.focus();
					return false;
				}
				
				//validate return time hours
				
				if (document.forms[0].returnHours.selectedIndex == 0) {
					window.alert("Please select the number of hours for return time.");
					document.forms[0].returnHours.focus();
					return false;
				}
				
				//validate return time minutes
				
				if (document.forms[0].returnMinutes.selectedIndex == 0) {
					window.alert("Please select the number of minutes for return time.");
					document.forms[0].returnMinutes.focus();
					return false;
				}
				
				//validate first name
			
				if (document.forms[0].firstName.value=="") {
					window.alert("Please enter your first name.");
					document.forms[0].firstName.focus();
					valid = false;
					return valid;
				}
				
				//validate last name
			
				if (document.forms[0].lastName.value=="") {
					window.alert("Please enter your last name.");
					document.forms[0].lastName.focus();
					valid = false;
					return valid;
				}
				
				//validate street address
			
				if (document.forms[0].street.value=="") {
					window.alert("Please enter your street address.");
					document.forms[0].street.focus();
					valid = false;
					return valid;
				}
				
				//validate city
			
				if (document.forms[0].city.value=="") {
					window.alert("Please enter your city.");
					document.forms[0].city.focus();
					valid = false;
					return valid;
				}
				
				//validate zip code
				
				if (document.forms[0].zip.value==""){
					window.alert("Please enter your zip code.");
					document.forms[0].zip.focus();
					valid=false;
					return valid;
				}
	
				var re5digit=/^\d{5}$/ 
	
				if (document.forms[0].zip.value.search(re5digit)==-1){ 
					window.alert("Please enter a 5 digit number")
					valid=false;
					return valid;
				}
				
				//validate date of birth
				
				if (document.forms[0].date.value == "'' || '(mm/dd/yyyy)'" ){
					window.alert("Please enter your date of birth.");
					document.forms[0].birthDate.focus();
					valid=false;
					return valid;
				}
				
				var reDateFormat = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
				
				if(document.forms[0].date.value.search(reDateFormat)==-1){
					window.alert("Please enter a standard format. [mm/dd/yyyy]")
					valid=false;
					return valid;
				}
				
				//check if over 18
				
				var age;
				var input = document.forms[0].birthDate.value;
				var pyear = parseInt(input.substring(6,10));
				var pmonth = parseInt(input.substring(0,2)) - 1;
				var pday = parseInt(input.substring(3,5));
	
				if ( month < pmonth ){
					age = year - pyear - 1;
				}
				else if ( month > pmonth ){
					age = year - pyear;
				}
				else if ( month == pmonth ){
					if ( day < pday ){
						age = year - pyear - 1;
					}
					else if ( day > pday ){
						age = year - pyear;
					}
					else if ( day == pday ){
						age = year - pyear;
					}
				}
				if(age < 18){
					window.alert('Attention: Under 18!');
					valid=false;
					return valid;
				}	
                                //calculate total cost and diplay in window.confirm() dialog box
				
				var equip = document.forms[0].equipment.value
				var pDate = document.forms[0].pickupDate.value
				var pHours = document.forms[0].pickupHours.value
				var pMinutes = document.forms[0].pickupMinutes.value
				var rDate = document.forms[0].returnDate.value
				var rHours = document.forms[0].returnHours.value
				var rMinutes = document.forms[0].returnMinutes.value
				
				var pTime = pHours + pMinutes;
				var rTime = rHours + rMinutes;
				var total = (((rDate - pDate) - 1) * 24) * equip) + ((rTime + (24 - pTime)) * equip);
				var OK = window.confirm(" The total rental cost is $" + total + "\n Click OK to accept, Cancel to decline");

				if (OK) {return true}
				else {return false}
			}
			
			
		/* ]]> */
	</script>

</head>
<body onload = "rotateImage('rImage')">

	<h1> ABC Outdoor Sports Equipment </h1>

	
	<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;"> 
	
	<br/>
	<br/>
	
	<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
		<table border = "0">
			<tr>
				<td>
					Equipment:<br/>
					<select name = "equipment">
						<option value="unselected">Select Equipment Type</option>
						<option value = 20>Fishing Boat</option>
						<option value = 15>Kayak</option>
						<option value = 2>Mountain Bike</option>
						<option value = 10>Scuba Gear</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Pick-up Date: <br/>
					<input type = "text" id = "dateIn" name = "pickupDate" onchange = checkValidPDate(this.value)>
				</td>
				<td>
					Pick-up Time: <br/>
					<select name = "pickupHours">
						<option value="unselected">hr</option>
						<option value = 7>07</option>
						<option value = 8>08</option>
						<option value = 9>09</option>
						<option value = 10>10</option>
						<option value = 11>11</option>
						<option value = 12>12</option>
						<option value = 13>13</option>
						<option value = 14>14</option>
						<option value = 15>15</option>
						<option value = 16>16</option>
						<option value = 17>17</option>
					</select>

					<select name = "pickupMinutes">
						<option value="unselected">min</option>
						<option value = 0>00</option>
						<option value = .5>30</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Return Date: <br/>
					<input type = "text" id = "dateOut" name = "returnDate" onchange = checkValidRDate(this.value)>
				</td>
				<td>
					Return Time: <br/>
					<select name = "returnHours">
						<option value="unselected">hr</option>
						<option value = 7>07</option>
						<option value = 8>08</option>
						<option value = 9>09</option>
						<option value = 10>10</option>
						<option value = 11>11</option>
						<option value = 12>12</option>
						<option value = 13>13</option>
						<option value = 14>14</option>
						<option value = 15>15</option>
						<option value = 16>16</option>
						<option value = 17>17</option>
					</select>
					
					<select name = "returnMinutes">
						<option value="unselected">min</option>
						<option value = 0>00</option>
						<option value = .5>30</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					First Name: <br/>
					<input type = "text" name = "firstName"/>
				</td>
				<td>
					Last Name: <br/>
					<input type = "text" name = "lastName"/>
				</td>
			</tr>
			<tr>
				<td>
					Street: <br/>
					<input type = "text" name = "street"/>
				</td>
				<td>
					City: <br/>
					<input type = "text" name = "city"/>
				</td>
				<td>
					Zip:<br/>
					<input type = "text" name = "zip" maxlength = "5"/>
				</td>
			</tr>
			<tr>
				<td>
					Date of Birth: <br/>
					<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
				</td>
			</tr>
			<tr>
				<td colspan = "3" align = "center">
					<input type = "submit" name = "submit" value = "Submit Reservation"/>
					<input type = "button" name = "cookies" value = "Store User Information"/>
				</td>
			</tr>
		</table>
	</form>


</body>
</html>

<script type="text/javascript" src="_inc/orderform04.js"></script>

<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
	var anOrder1 = new OrderForm();
}
//]]>
</script>

<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Black Hair Clips
$<span id="txtPrice0">10</span>
<select id="sel0">
	<option value="val0">0</option>
	<option value="val1">1</option>
	<option value="val2">2</option>
	<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Red Hair Clips
$<span id="txtPrice1">10</span>
<select id="sel1">
	<option value="val0">0</option>
	<option value="val1">1</option>
	<option value="val2">2</option>
    <option value="val3">3</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>