Avoiding Problems With getElementById Method in IE7

Every week this website gets about 700 unique visits from Google searches, mostly from people searching for solutions to problems with JavaScript and CSS. I'm flattered, and I hope I can continue to publish useful articles that will assist people and help with the exchange of ideas and techniques. One search phrase that leads surfers to my site pretty much every day is something along the lines of "getElementById explorer 7″.

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 getElementById method available in JavaScript, particularly in Internet Explorer versions 6 and 7. And since the users seem to be searching through dozens of web pages looking for a solution to their particular problem, then obviously the pages discussing this JavaScript method are either too confusing or don't specifically provide a practical solution.

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.

The name and id Attributes for 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 any given form element is the same as the value for the id attribute for that same element.

Do This:

<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.

The form HTML Element Should Not Have a name Attribute

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:

<form id="contact_form">

Don't Do This

<form name="conact_form" id="contact_form">

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:

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

...

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

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:

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

Do This:

<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 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.

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.