FAQ Topic - How do I get the value of a form control? (2010-06-08)

-----------------------------------------------------------------------
FAQ Topic - How do I get the value of a form control?
-----------------------------------------------------------------------

In HTML documents, a form may be referred to as a property of the
` document.forms ` collection, either by its ordinal index or by name
(if the ` form ` has a name). A ` form `'s controls may be similarly referenced
from its ` elements ` collection:

var frm = document.forms[0];
var control = frm.elements["elementname"];

Once a reference to a control is obtained, its (string) ` value `
property can be read:-

var value = control.value;
value = +control.value; //string to number.

Some exceptions would be:

First Exception: Where the control is a ` SELECT ` element, and
support for older browsers, such as NN4, is required:

var value = control.options[control.selectedIndex].value;

Second Exception: Where several controls share the same name,
such as radio buttons. These are made available as collections
and require additional handling. For more information, see:-

http://jibbering.com/faq/notes/form-access/

http://jibbering.com/faq/names/

Third Exception: File inputs. Most current browsers do not allow
reading of ` type="file" ` input elements in a way that is useful.


The complete comp.lang.javascript FAQ is at
http://jibbering.com/faq/

--

The sendings of these daily posts are proficiently hosted
by http://www.pair.com.

In comp.lang.javascript message <4c0d7a0b$0$278$14726298@news.sunsite.dk
>, Mon, 7 Jun 2010 23:00:03, FAQ server <javascript@dotinternet.be>
posted:

>-----------------------------------------------------------------------
>FAQ Topic - How do I get the value of a form control?
>-----------------------------------------------------------------------
>
>In HTML documents, a form may be referred to as a property of the
>` document.forms ` collection, either by its ordinal index or by name
>(if the ` form ` has a name). A ` form `'s controls may be similarly referenced
>from its ` elements ` collection:
>
>var frm = document.forms[0];
>var control = frm.elements["elementname"];


FAQ entry lacks any reference to "this.form".

Commonly, a reference to a form, useful for referring to any of its
elements, is wanted in a function executed as a consequence of an event
of a control on the form, such as <input type=button value=do
onClick="Process(arg)">. By putting 'this.form' in the 'arg' position,
function 'Process(F)' gets that reference directly.

There is then no need to count or to name forms.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (RFCs 5536/7)
Do not Mail News to me. Before a reply, quote with ">" or "> " (RFCs 5536/7)

On 6/9/2010 12:25 PM, Dr J R Stockton wrote:
> In comp.lang.javascript message<4c0d7a0b$0$278$14726298@news.sunsite.dk
>> , Mon, 7 Jun 2010 23:00:03, FAQ server<javascript@dotinternet.be>
> posted:
>
>> -----------------------------------------------------------------------
>> FAQ Topic - How do I get the value of a form control?
>> -----------------------------------------------------------------------
>>
>> In HTML documents, a form may be referred to as a property of the
>> ` document.forms ` collection, either by its ordinal index or by name
>> (if the ` form ` has a name). A ` form `'s controls may be similarly referenced
>>from its ` elements ` collection:
>>
>> var frm = document.forms[0];
>> var control = frm.elements["elementname"];
>
>
> FAQ entry lacks any reference to "this.form".
>

A form control has a `form` property. That property is irrelevant to the
event.

The `this` value of an event handler callback in dom 0 event handlers
and in callbacks for addEventListener is the target itself.

> Commonly, a reference to a form, useful for referring to any of its
> elements, is wanted in a function executed as a consequence of an event
> of a control on the form, such as<input type=button value=do
> onClick="Process(arg)">. By putting 'this.form' in the 'arg' position,
> function 'Process(F)' gets that reference directly.
>
> There is then no need to count or to name forms.
>

Mentioning that form control has a value property answers the question
but does it seems a too obvious?

Garrett

In comp.lang.javascript message <hupel0$7ho$1@news.eternal-
september.org>, Wed, 9 Jun 2010 18:20:33, Garrett Smith
<dhtmlkitchen@gmail.com> posted:

>On 6/9/2010 12:25 PM, Dr J R Stockton wrote:
>> In comp.lang.javascript message<4c0d7a0b$0$278$14726298@news.sunsite.dk
>>> , Mon, 7 Jun 2010 23:00:03, FAQ server<javascript@dotinternet.be>
>> posted:
>>
>>> -----------------------------------------------------------------------
>>> FAQ Topic - How do I get the value of a form control?
>>> -----------------------------------------------------------------------
>>>
>>> In HTML documents, a form may be referred to as a property of the
>>> ` document.forms ` collection, either by its ordinal index or by name
>>> (if the ` form ` has a name). A ` form `'s controls may be similarly
^^^^^^^^^^^^^^^^^^^^^
"A form's controls" is acceptable English. But if 'form' must be
surrounded by extra spaces and quotes it is ugly and disconcerting. In
such cases, use instead "The controls of a ` form `".

>>>referenced
>>>from its ` elements ` collection:
>>>
>>> var frm = document.forms[0];
>>> var control = frm.elements["elementname"];
>>
>>
>> FAQ entry lacks any reference to "this.form".
>>
>
>A form control has a `form` property. That property is irrelevant to
>the event.

On the contrary; as I indicate below, it is a commonly a useful property
when the event is called.

>The `this` value of an event handler callback in dom 0 event handlers
>and in callbacks for addEventListener is the target itself.
>
>> Commonly, a reference to a form, useful for referring to any of its
>> elements, is wanted in a function executed as a consequence of an event
>> of a control on the form, such as<input type=button value=do
>> onClick="Process(arg)">. By putting 'this.form' in the 'arg' position,
>> function 'Process(F)' gets that reference directly.
>>
>> There is then no need to count or to name forms.
>>
>
>Mentioning that form control has a value property answers the question
>but does it seems a too obvious?

It should be obvious, ought to be included for completeness, and as an
answer to the *original* question is insufficient.

Most of the current answer should instead be under a question "How do I
get a reference to an element?", perhaps divided into subsections. That
could be followed by "How do I style an element?"; it should be followed
by "How to I get the value of an element?".

The latter is the place to mention '.value', 'unary +' for Numbers,
'checked', and other cases.

--
(c) John Stockton, nr London UK. ???@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Check boilerplate spelling -- error is a public sign of incompetence.
Never fully trust an article from a poster who gives no full real name.