An Id Without a Name
June 27th, 2009Yes, you are shaking your head, thinking that Internet Explorer (IE) 8 is the latest web browser, but web applications created four or five years ago are expected to operate using the web browser used during that time, Internet Explorer 6.
So, here is one of the many Internet Explorer 6 oddities.
When dynamically creating form inputs, you can assign an id to it; however, Internet Explorer 6 does not support assigning a names to them as form names are considered a read-only property. Consider the following JavaScript function that create and attaches a text element.
function addTextElement(appendElement, name, id, value) {
var textElement = document.createElement('input');
textElement.type = 'text';
textElement.name = name;
textElement.id = id;
textElement.value = value;
appendElement.appendChild(textElement);
}
The textElement.name does nothing. Below is code that uses the above function to dynamically create a form element and attach it to a form, my_form.
function onLoadHandler() {
var formRef = document.forms.my_form;
addTextElement(formRef, 'element_name', 'element_id', 'element_value');
alert(formRef.innerHTML);
}
The alert reveals that the form element in question has an id, type and value; however, it lacks a name. Code operating in IE6 has to reference the form element by id.
What’s the oddity? When the form is submitted to the web server, the name appears on the other side.
To reference the dynamically created element name in IE6, the name needs passed into the createElement method as shown below. Only then will you be able to reference the form element by name.
function addTextElement(appendElement, name, id, value) {
var textElement = document.createElement("<input type='text' name='" + name + "' id='" + id + "' value='" + value + "'>");
appendElement.appendChild(textElement);
}