www.webdeveloper.com
Results 1 to 7 of 7

Thread: document.GetElementById, cross browser support, and id / name tags

Hybrid View

  1. #1
    Join Date
    Aug 2005
    Posts
    278

    document.GetElementById, cross browser support, and id / name tags

    First off, I have a mess.

    I developed an entire infrastructure (fixed on an IE environment, so all good, right?) that people are now complaining it is not working on iPad. Well, it basically doesn't work on anything above IE9, and any other browser. So, IE9 and below flawless, anthing else, no go. I'm guessing this is when HTML5 was introduced to IE, but not sure.

    Anyway, as a general issue, what is happening in IE 9 (working), when I call document.getElementById, it actually looks at teh ID AND/OR the name of the form element. I used this in many differen scenarios, and incorrectly....this I know.

    So, I'll have an example of something like this:

    <input type="test" id="[test]" name="test" value="12345">

    Then, I'd call it like this:

    var test1 = document.getElementById("[test]").value;
    var test2 = document.getElementById("test").value;
    alert(test1);
    alert(test2);

    The alerts woudl both read 12345

    Now, when I go to run the same style of code on another browser, I get an error on var test2 = document.getElementById("test").value; because it doesn't exist

    Problem is my .js page has over 2500 lines of code, and making a change on it affects our entire application, so I can't just fix it for one page at a time, it has to be one big global change.

    In the meantime, I am staying on IE9 for work environment, but eventually it will have to be fixed, especially since they want to use these pages on iPad, or any other browser.

    So, I'm looking for an alternative to document.getElementById(), or a way to force my .js page to render in the old HTML, or a way to make other browsers work identical to IE9.

    Any ideas?

  2. #2
    Join Date
    Aug 2005
    Posts
    278
    Oh, I also call document.getElementById("test").name as an example; hence, why I have the ID / name fields identified and are seperate. Basically, I have the ID be the database field name, and the name is the description of that field, so I look at the ID value, but I display the name value on alert if something was entered incorrectly.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,108
    To get maximum compatibility your HTML must comply with the older standard for valid 'id' attribute values:

    An 'id' attribute must begin with a letter (A-Z or a-z) and contain no spaces. So "[test]" would be invalid under the older standards.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Aug 2005
    Posts
    278
    That won't solve my problem, that is just an example.

    <input type="test" id="test" name="test22" value="12345">

    var test1 = document.getElementById("test").value;
    var test2 = document.getElementById("test22").value;
    alert(test1);
    alert(test2);

    both alert the value 12345

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there dzirkelb,

    does this example help....
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>If id or name</title>
    
    <script>
    (function() {
       'use strict';
    
    function init(){ 
    
       var el=document.getElementsByTagName('*');
       var c=el.length;
    
    while(--c>-1) {
       el[c].onmouseover=function(){
    if(this.id) {
       alert(this.id);
     }
    else {
    if(this.name) {
       alert(this.name);
         }
        }
       }
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    </script>
    
    </head>
    <body>
    
    <div>
     <input type="text" id="test0" value="abc">
     <input type="text" name="test1" value="def">
     <input type="text" id="test2" value="ghi">
     <input type="text" name="test3" value="jkl">
    </div>
    
    </body>
    </html>
    coothead

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    try refering the form elements by index
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    586
    1. The 'input' tag has an invalid 'type' value.
    2. The 'id' value must match the 'name' value.
    3. The 'id' value is invalid.
    4. Try this:
    Code:
    if (document.getElementById("test")) {
      var test1 = document.getElementById("test").value;
    } else {
      var test1 = document.getElementById("[test]").value;
    }
    alert(test1);

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles