New Topic/Question
Reply
I seem to be having trouble getting my homework correct. In this assignment i have to set an order form so that when a user opens the form a date should appear i the date field. When a new quantity is entered in the quantity column the cost should automatically update. Anything other than digits entered should result in an error and the value entered should reset to zero. When a shipping option is selected the total cost should automatically be updated to reflect the shipping price. And the form cannot be submitted unless a shipping option is chosen.
I am getting no errors in Firefox w/ firebug on, IE, or Chrome so that is what has me stumped thus far, i am not very experienced with JS so i have no idea where to look next.
Here is the HTML
<!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">
<head>
<!--
New Perspectives on Javascript, 2nd Edition
Tutorial 5
Review Assignment
GPS-ware Order Form
Author: Will Griffin
Date: 2/27/12
Filename: order.htm
Supporting files: gps.css, gpsware.jpg, form.js
-->
<title>GPS-ware Order Form</title>
<link href="gps.css" rel="stylesheet" type="text/css" />
<script src="form.js" type="text/javascript"></script>
<script type="javascript">
</head>
<body>
<form id="orders" method="post" action="done.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"
tabindex="-1" readonly="readonly" />
</p>
<fieldset>
<legend>Enter the quantity of each item and press the Tab key</legend>
<table cellspacing="2">
<tr><th class="label">Product</th><th>Price</th>
<th>Quantity</th><th>Cost</th></tr>
<tr>
<td class="label">GoMap 1.0</td>
<td><input name="price1" id="price1" size="8" value="19.95"
tabindex="-1" readonly="readonly" />
</td>
<td><input name="qty1" id="qty1" size="8" value="0" />
</td>
<td><input name="cost1" id="cost1" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="label">Drive Planner 2.0</td>
<td><input name="price2" id="price2" size="8" value="29.95"
tabindex="-1" readonly="readonly" />
</td>
<td><input name="qty2" id="qty2" size="8" value="0" />
</td>
<td><input name="cost2" id="cost2" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="label">Hiker 1.0</td>
<td><input name="price3" id="price3" size="8" value="29.95"
tabindex="-1" readonly="readonly" /></td>
<td><input name="qty3" id="qty3" size="8" value="0" />
</td>
<td><input name="cost3" id="cost3" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="label">G-Receiver I</td>
<td><input name="price4" id="price4" size="8" value="149.50"
tabindex="-1" readonly="readonly" /></td>
<td><input name="qty4" id="qty4" size="8" value="0" />
</td>
<td><input name="cost4" id="cost4" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="label">G-Receiver II</td>
<td><input name="price5" id="price5" size="8" value="199.50"
tabindex="-1" readonly="readonly" /></td>
<td><input name="qty5" id="qty5" size="8" value="0" />
</td>
<td><input name="cost5" id="cost5" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="label">G-Receiver III</td>
<td><input name="price6" id="price6" size="8" value="249.50"
tabindex="-1" readonly="readonly" /></td>
<td><input name="qty6" id="qty6" size="8" value="0" />
</td>
<td><input name="cost6" id="cost6" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr><td class="col4" colspan="4"> </td></tr>
<tr>
<td class="col3" colspan="3">Sales Tax (5%)</td>
<td><input name="tax" id="tax" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="col3" colspan="3">
<select id="shipping" name="shipping">
<option value="0">Choose a shipping option</option>
<option value="4.95">Standard (4-6 business days) $4.95</option>
<option value="8.95">Express (2 days) $8.95</option>
<option value="12.95">Next Day (1 day) $12.95</option>
</select>
</td>
<td><input name="shipcost" id="shipcost" value="0.00" size="12"
tabindex="-1" readonly="readonly" />
</td>
</tr>
<tr>
<td class="col3" colspan="3">TOTAL</td>
<td><input name="total" id="total" size="12" value="0.00"
tabindex="-1" readonly="readonly" />
</td>
</tr>
</table>
</fieldset>
<p id="pbuttons">
<input type="reset" value="Reset" />
<input type="submit" value="Submit Order" />
</p>
</div>
</form>
</body>
</html>
The Javascript file:
/*
New Perspectives on Javascript, 2nd Edition
Tutorial 5
Review Assignment
Author: Will Griffin
Date: 2/27/12
Filename: form.js
Functions List:
todayTxt()
Returns the current date in the format mm-dd-yyyy
initForm()
Sets up and initializes the Web form.
productCosts()
Returns the total product costs
shipExpense()
Stores the value of the selected shipping option
calcTotal()
Calculates the total cost of the order
calcShipping()
Calculates the total cost of shipping and updates the
total cost of the order
calcCost()
Calculates the cost of each order and updates the total
cost
validateForm()
Validates the form prior to submission
resetForm()
Resets the Web form and Web page
*/
window.onload=initForm;
function todayTxt() {
var Today=new Date();
return Today.getMonth()+1+"-"+Today.getDate()+"-"+Today.getFullYear();
}
function initForm() {
document.forms[0].date.value = todayTxt();
formObject.element.focus(qty1);
formObject.element.blur(qty1);
formObject.element.blur(qty2);
formObject.element.blur(qty3);
formObject.element.blur(qty4);
formObject.element.blur(qty5);
formObject.element.blur(qty6);
document.forms[0].onchange = calcShipping();
}
function productCosts() {
var pc1 = parseFloat(document.forms[0].cost1);
var pc2 = parseFloat(document.forms[0].cost2);
var pc3 = parseFloat(document.forms[0].cost3);
var pc4 = parseFloat(document.forms[0].cost4);
var pc5 = parseFloat(document.forms[0].cost5);
var pc6 = parseFloat(document.forms[0].cost6);
var sum= pc1+pc2+pc3+pc4+pc5+pc6;
return sum;
}// end of the productionCosts function
function shipExpense() {
var sindex = document.forms[0].ship.value = selectedIndex;
var shipPrice = parseFloat(sindex);
return shipPrice;
}//end of the shipExpense function
function calcTotal() {
var orderCost = productCosts():
var orderTax = orderCost*.05;
var orderShip = shipExpense();
var orderTotal = orderCost+orderTax+orderShip;
document.form[0].tax.value = orderTax.toFixed(2);
document.form[0].total.value = orderTotal.toFixed(2);
}//end of the calcTotal function
function calcShipping() {
document.form[0].shipcost.value = shipExpense();
calctotal();
}//end of the calcShipping function
function calcCost() {
var iNum = document.getElementById();
var price = document.form[0].elements["price"+iNum].value;
var qty = document.form[0].elements["qty"+iNum].value;
var cost = document.form[0].elements["cost"+iNum];
reqty = /[0-9]/g;
if (reqty.test(qty)) {
cost.value = (price*qty).toFixed(2);
calcTotal();
}else{
alert("Please enter a digit greater than or equal to 0");
qty=0;
document.getElementById("qty"+1).focus();
document.getElementById("qty"+1).focus();
}
}//end the caclCost function
function validateForm() {
if (document.forms[0].shipping.selectedIndex ==0);
alert("You must select a shipping option");
{ return false;}
else {return true;}
}//end of the validateForm function
function resetForm() {
I know i have yet to do the resetForm function, but i thought i would post on here before i went any further.
And the CSS:
/*
New Perspectives on Javascript, 2nd Edition
Tutorial 5
Review Assignment
Filename: gps.css
This file contains styles used in the order.htm file.
*/
body {background-image: url(border.jpg); background-position:left;
background-repeat: repeat-y; margin-top:0; padding-top:0}
#links {position: absolute; top: 5px; left: 0px; width: 90px;
font-family:Arial, Helvetica, sans-serif; font-size:8pt}
#links a {color:black; text-decoration:none; display: block; margin-left: 10px}
#links a.newgroup {margin-top: 10px}
#links a:hover {color:blue; background-color: white}
#main {position: absolute; top: 5px; left: 120px; width: 530px}
#logo {border-bottom: 2px solid rgb(222,179,126); margin-bottom: 0px}
#main h1 {font-family: Arial, Helvetica, sans-serif; letter-spacing: 7;
margin-top: 0px; margin-bottom: 0px}
#datep {text-align: right; color: brown; font-size: 8pt; margin: 0px;
font-family: Arial, Helvetica, sans-serif}
#datep input {text-align: center}
table {width: 520px; font-size: 9pt; margin: 5px}
th {font-family: Arial, Helvetica, sans-serif; text-align: right; padding: 3px;
background-color: rgb(228,197,166); letter-spacing: 3; font-weight: normal}
th.label {text-align: left}
td {font-size:9pt; font-family: Arial, Helvetica, sans-serif;
text-align: right}
.label {text-align: left}
td.col3 {text-align: right; color: brown}
td.col4 {border-bottom: 1px solid rgb(102,102,102)}
legend {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: brown}
input {text-align: right; font-size: 9pt}
select {font-size: 9pt}
#total {background-color: ivory}
#pbuttons {text-align: center; margin-top: 5px}
#pbuttons input {margin: 0px 10px; background-color: rgb(228,197,166);
letter-spacing: 2; width: 120px; text-align: center}
I know i am not very experienced and it may just be something small iam not seeing. I just need to be pointed in the right direction. Thanks in advance for all of your help and support!
MultiQuote
| 