getElementById problem (in internet explorer)

<p>
getElementById problem (in internet explorer)
a few quick points on Internet Explorer’s handling of the getElementById method (cross-browser)
</p>
<H3>The name and id Attributes for Non-Grouped Form Inputs</H3>
<p>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.

Do This:
<code><input type="text" name="address" id="address" value="5th Avenue" /></code>

Don’t Do This:
<code><input type="text" name="full_address" id="address" value="5th Avenue" /></code>

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 name and 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.)
</p>
<H3>The form HTML Element Should Not Have a name Attribute</H3>
<p>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.

Also, the 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:
<code><form id="contact_form"></code>
Don’t Do This
<code><form name="conact_form" id="contact_form"></code>
</p>
Don’t Use 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:

<code><meta name="description" content="website description" /></code>

...

<code><textarea id="description" rows="10" cols="25">comments here</textarea></code>

Now take the following JavaScript code:

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:
<code><textarea id="description" rows="10" cols="25">comments here</textarea></code>

Do This:
<code><textarea id="comments_description" rows="10" cols="25">comments here</textarea></code>

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 id value using the getAttribute method
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 getElementsByTagName to target all <textarea> elements, 
then check the value of the id of 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.
Conclusion
There must still be a lot of legacy code out there that people are having trouble with, 
otherwise the issues occurring with getElementById would not be so common. 
Hopefully this article will help users quickly find solutions to why this often-used JavaScript method is not producing 
desired results in Internet Explorer’s browsers.

--<<--