...

View Full Version : document.forms[0 undefined]



johnmac81
05-25-2012, 04:38 AM
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.




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:




<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">&nbsp;</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!

Old Pedant
05-25-2012, 05:30 AM
Wrong:


price = document.forms[0].price.iNum;


Probably right:


price = Number( document.forms[0]["price" + iNum].value );

johnmac81
05-27-2012, 08:15 PM
Not Right.

xelawho
05-27-2012, 09:28 PM
I think Old Pedant is right, but your additional problem is that your slice is getting all but the first 3 letters of the id, when (if I understand it) you really want just the last one (the number):



iNum = this.id.slice(-1);

price = Number(document.forms[0]["price"+iNum].value);
qty = Number(document.forms[0]["qty"+iNum].value);
cost = Number(document.forms[0]["cost"+iNum].value);


but then your number validation seems messed up to me, but anyway that may be a start...

xelawho
05-27-2012, 10:17 PM
there were a couple of other things, but this seems to work better:



<script type = "text/javascript">
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 (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(-1);

price = Number(document.forms[0]["price"+iNum].value);
qty = Number(document.forms[0]["qty"+iNum].value);
cost = Number(document.forms[0]["cost"+iNum].value); //this function is killing me

if (qty>=0) {
document.forms[0]["cost"+iNum].value = (price*qty).toFixed(2);
calcTotal();
} else{
alert("Please enter a digit greater than or equal to 0");
document.forms[0]["qty"+iNum].value = 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();
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum