Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form elements with the same name reflected in the DOM

Tags:

javascript

dom

If you have multiple form elements with the same name in a form, the entry in the elements collection on the form ends up being a collection of those fields (which is handy). The DOM2 HTML specification covers the elements collection but doesn't immediately seem to specify this behavior when there are multiple fields with the same name. Is the behavior covered by a standard (somewhere else in the DOM2 HTML specification, or in another spec)?

For clarity, I'm not asking what the best way to access these fields is. I'm asking whether the fact they end up in a collection (of varying kinds) on the elements collection is covered by a standard, and if so which one.

Example (live copy):

HTML:

<form id="theForm">
<input type="text" name="foo" value="one">
<input type="text" name="foo" value="two">
</form>

JavaScript:

var form = document.getElementById("theForm"),
    foo = form.elements.foo,
    index;
console.log("typeof foo = " + typeof foo);
if (typeof foo !== "undefined") {
  console.log("Object#toString says: " + Object.prototype.toString.call(foo));
}
if ('length' in foo && 'item' in foo) {
  console.log("Looks like a collection of some kind:");
  for (index = 0; index < foo.length; ++index) {
    console.log(index + ": " + foo[index].value);
  }
}

Sample output (for Chrome):

typeof foo = object
Object#toString says: [object NodeList]
Looks like a collection of some kind:
0: one
1: two

I've checked IE6, 7, 8, and 9, Firefox 4.0, Firefox 3.6, Chrome 12, Opera 11, and Safari 5. They all make the entry in elements a collection of some kind (Chrome, Firefox, and Safari make it a NodeList [though bizarrely on Safari the typeof is "function" not "object"], and IE and Opera make it an HTMLCollection, but they all have length, item, and [] access). I'm just trying to find the standard, if any, that specifies the behavior.

like image 261
T.J. Crowder Avatar asked Jun 28 '11 09:06

T.J. Crowder


People also ask

Can form inputs have the same name?

It is valid. It will create no confusion for the server side language (even PHP, with its conventions for naming fields that share a name, will consistently and predictably handle multiple inputs which don't use that convention).

Can two forms have the same name?

Only the name must be unique inside the form itself. See the docs: "The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any."

Can 2 elements have same name in HTML?

You cannot have more than one element with the same id in an HTML document.

What are the elements of DOM?

In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.


1 Answers

It's covered by the draft HTML5 spec (and the WHAT-WG version), which in this case seems more about documenting how it’s always worked, under the section on HTMLFormControlsCollection (W3C ref, WHAT-WG ref):

If there are multiple matching items, then a [HTMLFormControlsCollection (W3C ref, WHAT-WG ref) object containing all those elements is returned.

like image 125
Carey Avatar answered Sep 19 '22 02:09

Carey