In javascript is this a valid construct?: document.name.name.value?

Question

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?

document.forms.fname.elements.iname.value is the better style. — Bergi
– Bergi, Commented Dec 12, 2016 at 0:42

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 11, 2016 at 23:10

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user1106925 Over a year ago

They're not asking about the document forms collection but rather about accessing forms by name directly on the document object.

zer00ne Over a year ago

This Snippet shows the better way of using form names as a reference and the referencing previously mentioned.

user1106925 Over a year ago

Are you sure this is non-standard?

Alohci Over a year ago

@squint - You are quite correct. It's perfectly standard. It's described under section 3.1.3 DOM tree accessors of the HTML5 spec. Scroll down to the part that starts "The Document interface supports named properties. "

zer00ne Over a year ago

@squint Found the specs as well, updated accordingly. It's standard albeit a mess.

|

Collectives™ on Stack Overflow

In javascript is this a valid construct?: document.name.name.value?

1 Answer 1

UPDATE

SNIPPET

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

SNIPPET

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related