3

Here's the form:

<form name=fname ...
   <input name=iname value="" ...

This javascript function obtains the value of the input with:

var val = document.fname.iname.value;

Is that legit? I thought you had to do this with getElementsByName. It works, it's just I've never seen anyone do it that way. Is this one of those things that just happens to work... for now?

Community
  • 1
  • 1
user116032
  • 321
  • 2
  • 15

1 Answers1

5

UPDATE

According to WHATWG 6.2.4 Named access on the Window object

The Window object supports named properties. The supported property names of a Window object window at any moment consist of the following,...for all applet, embed, form, frameset, img, and object elements...

According to W3C DOM 2 HTML Specification 2.7.2.1 HTMLAllCollection

The following elements name attribute can be referenced as a property of the document object: anchor, applet, button, form, frame, iframe, img, input, map, meta, object, param, select, and textarea

This referencing approach is standard, but it's use is generally discouraged. A few reasons to avoid directly referencing DOM property or window object by name attributes are: variable shadowing, inadvertently scoping to the window object, major browser inconsistencies, etc. For details on why it should be avoided, read this section and this post.

This Snippet shows a stable and standard way of using form names as a reference document.forms and the referencing form names previously mentioned as well.

SNIPPET

var val1 = document.forms.fname.elements.iname.value;

console.log(val1);

var val2 = fname.iname.value;

console.log(val2);
<form name='fname'>
   <input name='iname' value="42">
</form>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • 1
    They're not asking about the `document forms` collection but rather about accessing forms by name directly on the `document` object. –  Dec 11 '16 at 23:18
  • This Snippet shows the better way of using form names as a reference and the referencing previously mentioned. – zer00ne Dec 11 '16 at 23:26
  • 1
    Are you sure this is non-standard? –  Dec 11 '16 at 23:27
  • Thanks for the link. It seems the .name.name. thing is a collections hack. I wonder if .name.name. would work elsewhere on elements just hanging out in space somewhere. Thanks. -3 is kinda heavy. Here's a point. – user116032 Dec 11 '16 at 23:29
  • @zer00ne: The reason I ask is that in the WHATWG, I see a reference to a getter on the `documents` object, as... `getter object (DOMString name); ` Trying to dig up more info. –  Dec 11 '16 at 23:33
  • AFAIK this involves form elements only. There is `window.frames.name` for referencing an iframe's window object but it's not a hack. – zer00ne Dec 11 '16 at 23:33
  • 1
    @squint - You are quite correct. It's perfectly standard. It's described under section [3.1.3 DOM tree accessors](http://w3c.github.io/html/dom.html#dom-tree-accessors) of the HTML5 spec. Scroll down to the part that starts "The Document interface supports named properties. " – Alohci Dec 12 '16 at 00:10
  • @Alohci: Ah, thanks. Looks like it's in the previous published version too, so it's definitely spec'd. Don't know if I'd personally use it, but good to know either way. –  Dec 12 '16 at 00:18
  • 1
    @squint Found the specs as well, updated accordingly. It's standard albeit a mess. – zer00ne Dec 12 '16 at 00:43
  • For `val2`, you can remove the `document.` prefix. – Joseph Quinsey Mar 28 '18 at 19:20