...

View Full Version : Correct syntax for getting objects?



d11wtq
12-21-2004, 02:58 PM
Hi,

I'm used to just using getElementById to look stuff up in my own scripts but I'm doing an assignment and it would not look good to put id's everywhere to modify a html page when there are already name attributes in the elements.

In this page I can't refer to the Family Name input box using
document.form1.familyName for some reason. Is it because it's inside a table after the form is opened? What syntax should I be using?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>A&amp;B: Order a Pan (Sample Order Form)</title>

<link rel="stylesheet" href="site.css" type="text/css">
</head>

<body>

<!-- Page-wide header -->
<div id="header">
<h1>Welcome to A &amp; B<br>
Pots and Pans Ltd.</h1>
</div>


<!-- Leftmost column contents -->
<div id="left">
<h2>Visit:</h2>
<p><a href="index.html">Home</a></p>
<p><a href="product1.html">Pans</a></p>
<p>Buy a Pan</p>
<p><a href="chart.html">Chart</a></p>
<p><a href="code.html">Code</a></p>
<p>&nbsp;</p>
</div>


<!-- Middle (main) column contents -->
<div id="middle">
<h2>Sample Order Information Form</h2>
<form method="post" action="http://telemat.open.ac.uk/tt281/testform/decode_form.cfm">
<table cellspacing="0">
<tr>
<td><h3>Shipping Information</h3></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstName" maxlength="30"></td>
</tr>
<tr>
<td>Family Name</td>
<td><input type="text" name="familyName" maxlength="30"></td>
</tr>
<tr>
<td>Contact telephone number</td>
<td><input type="text" name="phoneNumber" maxlength="30"></td>
</tr>
<tr>
<td>Delivery Address</td>
<td>
<textarea name="delivery" rows="8" cols="30">Enter the delivery address.</textarea></td>
</tr>


<tr>
<td><h3>Billing Information</h3></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstName" maxlength="30"></td>
</tr>
<tr>
<td>Family Name</td>
<td><input type="text" name="familyName" maxlength="30"></td>
</tr>
<tr>
<td>Email address</td>
<td><input type="text" name="emailAddress" maxlength="30"></td>
</tr>
<tr>
<td>Contact telephone number</td>
<td><input type="text" name="phoneNumber" maxlength="30"></td>
</tr>
<tr>
<td>Credit Card Number</td>
<td><input type="text" name="cardNumber" maxlength="30"></td>
</tr>
<tr>
<td>Credit Card Type</td>
<td><input type="text" name="cardType" maxlength="30">Visa/MasterCard</td>
</tr>
<tr>
<td>Special Instructions</td>
<td>
<textarea name="instructions" rows="8" cols="30">Enter your requirements here or comments.</textarea></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit"></td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>

<!-- Rightmost column contents -->
<div id="right">
<h2>Your cart:</h2>
<div class="cartitems" id="itemlist">
<p>No items</p>
</div>
</div>


<!-- Page-wide footer -->
<div id="footer">
<p>@2004 A&amp;B Ltd.</p>
</div>


</body>
</html>

dumpfi
12-21-2004, 03:17 PM
It's because your form element has no name attribute with the value 'form1'.

Of course, you could also use document.getElementsByName('xyz') to get an array of elements with a name of 'xyz'.

dumpfi

d11wtq
12-21-2004, 03:51 PM
Sorry I missed that out. My form did have name="form1" in the tag and it still didn't work.

Error said document.form1.familyName is not an object or null.

I'll try using getElementsByName() - never used it. Sounds good. I'll test it out :-)

Kor
12-22-2004, 09:35 AM
if using document.getElementsByName() take care that this is a collection of elements, not an element, thus, if you have a single element with that name you should specify this by the index

document.getElementsByName('somename')[0]



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum