Hi
I am banging my head against a wall at this point. An assignment I am doing is nearly complete but I keep getting this one error from the Firefox console and Firebug:
document.forms[0].price is undefined
[Break On This Error]
price = document.forms[0].price.iNum;
Please find below the JS code copied in ()I know its a pain to copy it all, but the last forum I was on they asked for it all. The problem is located within the calcCost function. After this code, I will copy the HTML code.
Code:
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();
document.forms[0].qty1.focus();
document.forms[0].qty1.onblur = calcCost;
document.forms[0].qty2.onblur = calcCost;
document.forms[0].qty3.onblur = calcCost;
document.forms[0].qty4.onblur = calcCost;
document.forms[0].qty5.onblur = calcCost;
document.forms[0].qty6.onblur = calcCost;
document.forms[0].shipping.onchange = calcShipping;
}
function productCosts() {
pc1 = parseFloat(document.forms[0].cost1.value);
pc2 = parseFloat(document.forms[0].cost2.value);
pc3 = parseFloat(document.forms[0].cost3.value);
pc4 = parseFloat(document.forms[0].cost4.value);
pc5 = parseFloat(document.forms[0].cost5.value);
pc6 = parseFloat(document.forms[0].cost6.value);
return sum(pc1 + pc2 + pc3 + pc4 + pc5 + pc6);
}
function shipExpense() {
sindex = document.forms[0].shipping.selectedIndex;
return parseFloat(document.forms[0].shipping[sindex].value);
}
function calcTotal() {
ordercost = productCosts();
ordertax = 0.05 * ordercost;
ordership = shipExpense();
ordertotal = (ordercost + ordertax + ordership);
document.forms[0].tax.value = ordertax.toFixed(2);
document.forms[0].total.value = ordertotal.toFixed(2);
}
function calcShipping() {
document.forms[0].shipcost.value = shipExpense();
calcTotal();
}
function calcCost() {
iNum = this.id.slice(0,3);
price = document.forms[0].price.iNum.value;
qty = document.forms[0].qty.iNum.value;
cost = document.forms[0].cost.iNum.value; //this function is killing me
reqty = /\d{1,}$|[^a-zA-Z]$/;
if (reqty.test == 0) {
cost = (price*qty).toFixed(2);
calcTotal();
} else
alert("Please enter a digit greater than or equal to 0");
qty = 0;
document.forms[0].qty[iNum].focus();
}
function validateForm() {
if (sIndex == 0) {
alert("You must select a shipping option.");
return false;
} else return true;
}
function resetForm() {
location.reload();
}
The HTML code:
Code:
<title>GPS-ware Order Form</title>
<link href="gps.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="form.js"></script>
</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>
Again, I am sorry for the endless code. If this is not required on this forum in future, please let me know, I do not want to waste your time.
Many thanks for any help.
John!
Before you post, read our: 
