If you type this phrase into Google, Impressive Webs currently comes in at around result 115. Not to mention the fact that the article that comes up doesn’t really address this issue directly. That’s not a very good ranking for that search phrase — yet somehow people are still finding one of my pages through that search.
It is obvious that developers — likely beginners — are having issues getting the proper results when utilizing the
Well, I’m not claiming to provide the perfect solution/article/resource here, but I thought I would post a few quick points on Internet Explorer’s handling of the
getElementById method that might help a few people. The truth is, I have never had much of an issue at all getting
getElementById to work cross-browser, but after doing some quick research, it seems there are a few things to keep in mind with regards to Internet Explorer.
id Attributes for Non-Grouped Form Inputs
Often, form inputs will have both a
name attribute and
id specified. To prevent problems with
getElementById, make sure the value for the
name attribute for a non-grouped form element is the same as the value for the
id attribute for that same element.
<input type="text" name="address" id="address" value="5th Avenue" />
Don’t Do This:
<input type="text" name="full_address" id="address" value="5th Avenue" />
The reason you should do this is because in Internet Explorer, if you’re trying to target an element using
getElementById, for some reason that browser will search the
name attribute of certain elements on the page, in addition to the
id. Assuming we’ve used the wrong method for coding the name and id values, the code blocks below will get the exact same result in IE7:
var fullAddress = document.getElementById("full_address"); alert(fullAddress.value);
var fullAddress = document.getElementById("address"); alert(fullAddress.value);
In the first code block, I’m targeting the element via the
id attribute that has a value of “full_address”. In the second example, I’m targeting it the proper way via the actual
id. The result is the same in both cases, even though the first example shouldn’t work. Firefox, on the other hand, correctly tells you that the variable “fullAddress” is null.
(NOTE: I neglected to mention in the above section that I was specifically talking about non-grouped elements with the same
id attributes. Radio buttons and checkboxes obviously have to share the “name” attribute, so if they had
ids then there would be differences. See comments section for more.)
form HTML Element Should Not Have a
This problem is very similar to the issue above, so I won’t go into great detail. To avoid problems with
getElementById in Internet Explorer, don’t put a
name attribute on the
<form> element in your HTML.
name attribute for forms is deprecated in XHTML Strict, so it’s not best practice anyhow. The
name attribute was added to form elements in older sites, so if you’re trying to debug a
getElementById issue in IE7 on some inherited code, there could be a conflict occurring due to this fact.
So Do This:
Don’t Do This
<form name="conact_form" id="contact_form">
id="description" on Any Element in Your Page
This is a bit of a strange one, but again is related to the fact that the
name attribute causes conflicts when targeting elements by
id. If you have an element on your page with an
id with the value of “description”, this may conflict with a meta tag on the same page that has a
name attribute with a value of “description”.
Take the following HTML code as an example:
<meta name="description" content="website description" /> ... <textarea id="description" rows="10" cols="25">comments here</textarea>
var textareaBox = document.getElementById("description"); alert(textareaBox.value);
You would expect the value in the alert message to be “comments here”, which it does in Firefox. But in IE 6 & 7, the alerted value will be “undefined”, because the
meta tag does not have a “value” attribute.
So Don’t Do This:
<textarea id="description" rows="10" cols="25">comments here</textarea>
<textarea id="comments_description" rows="10" cols="25">comments here</textarea>
Of course, you may not have a meta description on that page, but just to be safe, don’t use an
id of “description”, in case the page is ever changed.
What if You Can’t Change the HTML?
It’s very rare, but there could be some instances where you’re not able to change the HTML and you still need to overcome one of the conflicts mentioned above. Below are some methods you can use to overcome this problem, although I’m not providing actual code examples — I’m sure you can do a Google search to help if necessary.
- Target an element by checking its
idvalue using the
- Use object detection to discern the capabilities of the user’s browser, then run a specific section of code that will deal with one of the issues mentioned in this article
- If, for example, you’re targeting the
<textarea>element, you could use
getElementsByTagNameto target all
<textarea>elements, then check the value of the
idof the elements within a loop that accesses each element
- Use contextual targeting. In other words, look for the element based on what its parent element is, or whether or not it has any children, etc.
There must still be a lot of legacy code out there that people are having trouble with, otherwise the issues occurring with
Please feel free to comment below on any other bugs or solutions related to
getElementById, and if you still can’t find a solution, I’ll leave the comments open indefinitely for this post, and you can provide a detailed description of your problem.