Specific of getting HTML form attributes by JavaScript code in Internet Explorer
Even such simple action as getting attributes of an html form by JavaScript can sometimes confuse the developer. Internet Explorer, as it often does, makes us research its "illogical logic".
Let's assume we have an HTML form looking like this:
<form action="form1 action attribute" id="f1">
<input name="input1" value="first input value">
</form>
To access form's "action" attribute (or any other attribute) we may use several methods, i.e.:
- form.action
- form.getAttribute('action')
- form.attributes['action'].value
- form.getAttributeNode('action').value
Also, to access one of the form’s fields we may use the following method: "form.input1", where "input1" is the value of the "name" attribute of the field inside the form. But lets see what happens if "name" attribute of an input inside a form is the same as the name of one of form's attributes.
To illustrate this, lets take a simple HTML document with a form and several elements, and add some JavaScript code showing what we receive using different methods of getting form attributes.
Example is available here (example.html), its code looks like this:
<html>
<head>
<script>
function alert_stat() {
var f = document.getElementById("f");
var a = "";
a += "form.method = " + f.method + "\n\r\n\r";
a += "form.action = " + f.action + "\n\r";
a += "form.action.value = " + f.action.value + "\n\r\n\r";
a += "form.getAttribute('action') = " + f.getAttribute('action') + "\n\r";
a += "form.getAttribute('action').value = " + f.getAttribute('action').value + "\n\r\n\r";
a += "form.attributes['action'] = " + f.attributes['action'] + "\n\r";
a += "form.attributes['action'].value = " + f.attributes['action'].value + "\n\r\n\r";
a += "form.getAttributeNode('action') = " + f.getAttributeNode('action') + "\n\r";
a += "form.getAttributeNode('action').value = " + f.getAttributeNode('action').value + "\n\r\n\r";
a += "form.getAttribute('customName') = " + f.getAttribute('customName') + "\n\r";
a += "form.getAttribute('customName').value = " + f.getAttribute('customName').value + "\n\r";
alert(a);
}
</script>
</head>
<body>
<form action="value of form's 'action' attribute" id="f" customName="value of form's custom attribute" method='post'>
<input name="action" value="value of input (name='action')" />
<input name="customName" value="value of input (name='cusomName') ">
</form>
<input type='button' onclick="javascript:alert_stat()" value='click me'>
</body>
</html>
If we open this example in any browser other than IE and press the button, we will see that values we receive are quite logical. But let’s see what happens in any version of Internet Explorer:
"form.method" returns the "method" attribute, how it should, but "form.action" returns input object that has "name" attribute equal to "action". OK, let’s look further: "form.getAttribute('action')" doesn't return attribute, but also returns input object.
For me this is not logical at all. However, we still able to access attribute node by calling "form.attributes['action']" or "form.getAttributeNode['action']". We can see the same behavior if the name of the attribute is not html-standart.
The real problems may occur because usually "getAttribute" method is used to get an attribute, but in case described above this method doesn't return what it must return.
So we can assert the following:
When getting HTML form’s attribute by getAttribute method in Internet Explorer, it will not return an attribute but will return a form field object, if the “name” attribute of this field is the same as the name of form’s attribute.
Good point is that other browsers do not have such problems. However developing cross-browser application often makes us to take in account such illogical features.
