SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Westville, Durban, South Africa
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getElementById()

    Can someone please confirm that the following two pairs of statements are equivalent, where in the first instance "Form1" is the input form and "Input1" is one of the input values that the client entered and in the second instance "Input2" is a text box in the "Form1" and "SomeValue" is a value calculated in the JS:

    First instance:
    Variable1 = document.getElementById("Input1").value;
    Variable1 = document.Form1.Input1.value;

    Second instance:
    document.getElementById("Input2").value = SomeValue;
    document.Form1.Input2.value = SomeValue;

    Many thanks for the feedback in advance

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.Form1.Input1 works in IE and some versions of Opera, but should be avoided.

    document.getElementById("Input1") works cross browser, IF the element has an id of 'input1'- if it has a name instead of an id it only works in IE.
    document.getElementsByName('input_1')[0] is good for named elements, if you have one of that name, or know the index of a shared name.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you have

    <form name="form1"><input name="in1" id="in2">

    Then the following are equivalent:

    document.form1.in1.value
    document.getElementById('in2').value

    The first of these uses the DOM0 method of referencing the field and the second uses the DOM1 method. The first will work in all browsers and the second will work in 5th Generation browsers and later (IE5+, Netscape 6+, Firefox, Opera 5+, Safari etc).

    Note that the getElementById method will only work if the field has an id and the other method will only work if the field has a name (except in IE where names and ids are treated as equivalent).

    There is no particular reason for avoiding the DOM0 method as it works in more browsers than the DOM1 method does. The time where it is necessary to avoid the DOM0 method is where there is [] on the end of the name so that the server processing will read the values into an array.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Westville, Durban, South Africa
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mrhoo - many thanks for that and for the useful snippet of info on IE.

    Your comment:... if it has a name instead of an id it only works in IE.

    Question - If the input has a 'name' AND an 'id' what happens there ?

    Question - If the 'name' and the 'id' have different values say 'name=input1' and 'id=value' ?

    Question - becuase of the cross-browser problems would you then recommend me to change all of my

    document.Form1.dataname.value

    to

    document.getElemenetById("dataname").value ??

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use this syntax:
    document.getElementsByName('input_1')[0]
    to return elements with unique names.

    The only names commonly shared are checkboxes and radios,
    and document.getElementsByName('sharedname')returns an array to work with.

    The only time you need an id is to attach a label with htmlFor attribute. I don't use many ids in forms, but they have to be unique in the document.
    They can be the same as an element's name if the name is unique. And of course you need a name for any field that is going to be submitted to the server,


Bookmarks

Posting Permissions

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