Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Correct syntax for getting objects?

    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
    Code:
    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?

    Code:
    <!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>

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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

  • #3
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 :-)

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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]
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •