getElementById problem (in internet explorer)

getElementById problem (in internet explorer) a few quick points on Internet Explorer’s handling of the getElementById method (cross-browser)

The name and 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. Do This: Don’t Do This: 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.)

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

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: Don’t Do This

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: ... 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: Do This: 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