Query on arrays of controls

**Michael Winter** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Dr John Stockton wrote on 27 Nov 2003:

<snip>
[color=blue]
> <input type=button name=B onClick=X() value=" ?? ">[/color]

Omission of the quotes around the onclick attribute value may have
been intentional, but I would like to point out that the only non-
alphanumeric characters that may appear in an unquoted attribute
value are hyphens, periods, underscores and colons.

<snip>
[color=blue]
> On it, in my MSIE4, pressing the ?? button repeatedly cycles its
> legend through 00 11 22 00 11 22 00 ... which demonstrates that
> such a set of name-matched controls can be accessed as an array
> there.
>
> Is that legitimate and generally available? I do not recall
> reading it.[/color]

Netscape's JavaScript reference (v1.3) states in the introduction for
the Radio object that a group of radio buttons under the same name
may be indexed with subscripts. In addition, the DOM method,
getElementsByNa me, will return "the (possibly empty) collection of
elements whose name value is given" in the argument to the method.
[color=blue]
> In particular, where I have a table similar in principle to
>
> 2001 2002 2003 2004 2005
> St P Sat Sun Mon Wed Thu
> St G Mon Tue Wed Fri Sat
> St A Fri Sat Sun Tue Wed
>
> and wish to auto-change the columns to be Year-2..Year+2 for any
> (current) Year, can I use for the St P row five instances of
> <input type=text name=StP size=5 readonly> and compute in turn
> elements [0]..[4] of this array (likewise for other rows), and
> have it working successfully for all reasonable
> javascript-enabled browsers?[/color]

Only INPUTs of type radio and checkbox can share control names. A
solution would be to use an array that contained the names of each
text box, index that, and use the value with the elements property of
a Form object or, if they are id values, as the argument to the
getElementById method.
[color=blue]
> Could I use <div>..</div> with DynWrite thus, instead of <input
> ...>?[/color]

If you are referring to dynamically altering an already loaded page,
I wouldn't know. If not, could you explain what you mean here?

Mike

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Dr John Stockton <spam@merlyn.de mon.co.uk> writes:
[color=blue]
> It is well-documented that if on a page there are several radio-
> buttons with the same name these are addressed as an array (and act
> collectively).[/color]
[color=blue]
> Someone (LRN?) recently wrote about another case where name-match
> implies array addressing.[/color]

Probably. It works that way for all form controls. Try:

<form id="foo">
<input type="text" name="x" value="42">
<input type="radio" name="x" value="37">
<input type="checkbox" name="x" value="87">
<select name="x"><optio n value="13" selected="selec ted">X</option></select>
</form>
<script type="text/javascript">
var xs = document.forms['foo'].elements['x'];
alert([xs.length,xs[0].value,xs[1].value,xs[2].value,xs[3].value]);
</script>

It alerts
4,42,47,87,13
in IE6, Opera 7, and Mozilla (and with some rewriting also in Netsape 4).

[color=blue]
> J=0
>
> function X() {
> F1.B.value = " " + F1.A[J++%3].value + " "
> }[/color]
[color=blue]
> On it, in my MSIE4, pressing the ?? button repeatedly cycles its
> legend through 00 11 22 00 11 22 00 ... which demonstrates that such
> a set of name-matched controls can be accessed as an array there.[/color]

It's not an array. If you check with "... instanseof Array", it gives
false. In Opera, it's an Object. In Mozilla, it's a NodeList. The
important thing is that it doesn't have a dynamic length or the methods
of Array.prototype .
[color=blue]
> Is that legitimate and generally available?[/color]

Apart from writing
F.B.value
instead of
document.forms. F.elements.B.va lue
then yes. (It wouldn't work in Mozilla using F as a global variable)
[color=blue]
> I do not recall reading it.[/color]

I can't find it in the DOM specification.
The HTMLFormDocumen t's "elements" property is a HTMLCollection.
Its "namedItem" method is only allowed to return a single Node.

It is probably a result of the DOM specification being written
to be compatible with typed languages, so the "namedItem" method
can't return a Node in some cases and a NodeList in others (NodeList
is what is returned by, e.g., getElementsByTa gName)

So, you'll have to look at the browser specific DOMs to find anything.

in Microsoft's documentation, you find:
---
If this parameter is a string and there is more than one element
with the name or id property equal to the string, the method returns
a collection of matching elements.
---
There is problably something similar in a Netscape documentation.
[color=blue]
> In particular, where I have a table similar in principle to[/color]
[color=blue]
> 2001 2002 2003 2004 2005
> St P Sat Sun Mon Wed Thu
> St G Mon Tue Wed Fri Sat
> St A Fri Sat Sun Tue Wed
>
> and wish to auto-change the columns to be Year-2..Year+2 for any
> (current) Year, can I use for the St P row five instances of
> <input type=text name=StP size=5 readonly> and compute in turn
> elements [0]..[4] of this array (likewise for other rows), and have
> it working successfully for all reasonable javascript-enabled
> browsers?[/color]

It should work. But if you have a table with a known width/height, you
can just name the elements based on the coordinates, e.g.
name="St(2,3)"
[color=blue]
> Could I use <div>..</div> with DynWrite thus, instead of <input
> ...>?[/color]

Not generally, no. There is no "name" attribute on a div, and the
"id" attribute must be unique. In IE, you can have several elements
with the same id, and document.all/document.getEle mentById will
return a collection. That is not portable.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Michael Winter <M.Winter@bluey onder.co.uk.inv alid> writes:
[color=blue]
> Only INPUTs of type radio and checkbox can share control names.[/color]

Reference? I see no such restriction in the HTML 4.01 specification.

It does *hint* it:
---
Several checkboxes in a form may share the same control name.
---
and
---
Radio buttons are like checkboxes except that when several share the
same control name, they are mutually exclusive
---
No other control has its name mentioned.
perhaps it is what they mean by
---
The scope of the name attribute for a control within a FORM element
is the FORM element.
---

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Michael Winter** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
[color=blue]
> Michael Winter <M.Winter@bluey onder.co.uk.inv alid> writes:
>[color=green]
>> Only INPUTs of type radio and checkbox can share control names.[/color]
>
> Reference? I see no such restriction in the HTML 4.01
> specification.
>
> It does *hint* it:
> ---
> Several checkboxes in a form may share the same control name.
> ---
> and
> ---
> Radio buttons are like checkboxes except that when several
> share the same control name, they are mutually exclusive
> ---
> No other control has its name mentioned.
> perhaps it is what they mean by
> ---
> The scope of the name attribute for a control within a FORM
> element is the FORM element.
> ---[/color]

Two controls in different forms can use the same name, but what Dr
Stockton wanted to do was use several text boxes with the same name
in the same form, which you cannot do. My statement was meant in the
context of his query, though I suppose I should have written:

Only INPUTs of type radio and checkbox can share control names within
the same form.

I knew the distinction, but I didn't feel it merited mentioning. I
was wrong.

Mike

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Michael Winter <M.Winter@bluey onder.co.uk.inv alid> writes:
[color=blue]
> Two controls in different forms can use the same name, but what Dr
> Stockton wanted to do was use several text boxes with the same name
> in the same form, which you cannot do.[/color]

That is what I was asking for a reference for. I can't find that
restriction in the HTML specification.
[color=blue]
> My statement was meant in the context of his query, though I suppose
> I should have written:
>
> Only INPUTs of type radio and checkbox can share control names within
> the same form.[/color]

That's how I read it. There is no explicit requirement in HTML that
control names must be distinct, and no browser that I have available
have a problem with several controls with the same name. The resulting
URL is "...?x=XXX&x=YY Y&x=ZZZ".

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Michael Winter** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
[color=blue]
> Reference? I see no such restriction in the HTML 4.01
> specification.
>
> It does *hint* it:[/color]
[color=blue]
> No other control has its name mentioned.[/color]

In my previous response, I didn't think properly about the above
statements. You are correct - there is no restriction stating that
control names must be unique within a form. In fact, it appears that
with form submission, data would be sent like so:

<FORM action="..." method="get">
<INPUT name="address" value="My house number">
<INPUT name="address" value="My street">
<INPUT name="address" value="My city">
</FORM>

....?address=My +house+number&a ddress=My+stree t&address=My+ci ty

That is, all data, in the order it appears in the document.

I have a question though. I know very little of the DOM, so I was
wondering if someone could tell me how you would know what form
elements came from which form if you retrieved them using
HTMLDocument.ge tElementsByName (). After obtaining the collection
returned, would you use Node.parentNode to get a HTMLFormElement
object, then HTMLFormElement .name to get the name? So, for the first
matching name (we'll assume it will be in a form), would it be
something like this?

function getFormContaini ng( elementName ) {
var matches = document.getEle mentsByName( elementName );

return matches[ 0 ].parentNode.nam e;
}

Mike

I will learn about the DOM someday...

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

**Michael Winter** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
[color=blue]
> Michael Winter <M.Winter@bluey onder.co.uk.inv alid> writes:
>[color=green]
>> Two controls in different forms can use the same name, but what
>> Dr Stockton wanted to do was use several text boxes with the
>> same name in the same form, which you cannot do.[/color]
>
> That is what I was asking for a reference for. I can't find that
> restriction in the HTML specification.[/color]

Please ignore that - read my other post.

Mike

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Michael Winter <M.Winter@bluey onder.co.uk.inv alid> writes:
[color=blue]
> ...?address=My+ house+number&ad dress=My+street &address=My+cit y
>
> That is, all data, in the order it appears in the document.[/color]

I wouldn't depend on the order. Other browsers could change that
without warning
[color=blue]
> I have a question though. I know very little of the DOM, so I was
> wondering if someone could tell me how you would know what form
> elements came from which form if you retrieved them using
> HTMLDocument.ge tElementsByName ().[/color]

All form controls have a property, "form", that is a reference to
the form they are within.
[color=blue]
> After obtaining the collection
> returned, would you use Node.parentNode to get a HTMLFormElement[/color]

No. The form doesn't need to be the immediate parent node of the
form control (and usually isn't).
[color=blue]
> return matches[ 0 ].parentNode.nam e;[/color]

return matches[0].form.name;

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Michael Winter** · Jul 20 '05, 12:09 PM

Re: Query on arrays of controls

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
[color=blue]
> Michael Winter <M.Winter@bluey onder.co.uk.inv alid> writes:
>[color=green]
>> ...?address=My+ house+number&ad dress=My+street &address=My+cit y
>>
>> That is, all data, in the order it appears in the document.[/color]
>
> I wouldn't depend on the order. Other browsers could change that
> without warning
>[/color]

You should be able to. That is defined in the specification:

For application/x-www-form-urlencoded (which includes anything
submitted with the GET method), "The control names/values are listed
in the order they appear in the document."

For multipart/form-data, "The parts are sent to the processing agent
in the same order the corresponding controls appear in the document
stream."

I don't know if scripting languages have that order imposed, though
(I haven't looked, nor do I quite know where to look).

<snipped reply to DOM question>

OK, thank you.

Mike

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

**Thomas 'PointedEars' Lahn** · Jul 20 '05, 12:10 PM

Re: Query on arrays of controls

Dr John Stockton wrote:
[color=blue]
> It is well-documented that if on a page there are several radio-
> buttons with the same name these are addressed as an array (and act
> collectively).
>
> Someone (LRN?) recently wrote about another case where name-match
> implies array addressing.[/color]

Form elements of the same name create a collection which is an object
having numeric properties (and a length property). It is not an array
(object).
[color=blue]
> <input type=button name=B onClick=X() value=" ?? ">[/color]

You must single/double-quote the value of the onclick attribute because
of the `(' and `)'.
[color=blue]
> <script>[/color]

The `type' attribute is mandatory.
[color=blue]
> J=0[/color]

It is good style to end JavaScript statements with `;'.
[color=blue]
> function X() {[/color]

It is also good style to name functions other than
constructors with a leading lowercase character.
[color=blue]
> F1.B.value = " " + F1.A[J++%3].value + " "[/color]

You should not use the (non-breaking) space character if you need space
between content. Instead, use CSS to define how content should be
formatted.
[color=blue]
> }
>
> </script>
> </body>
>
> On it, in my MSIE4, pressing the ?? button repeatedly cycles its
> legend through 00 11 22 00 11 22 00 ... which demonstrates that such
> a set of name-matched controls can be accessed as an array there.[/color]

It demonstrates that you can access those elements by the index operator
`[...]', nothing else.
[color=blue]
> Is that legitimate and generally available?[/color]

It is not but only because of F1.B which should read
document.forms["F1"].elements["B"].
[color=blue]
> I do not recall reading it.[/color]

Document Object Model HTML

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506

[color=blue]
> In particular, where I have a table similar in principle to
>
> 2001 2002 2003 2004 2005
> St P Sat Sun Mon Wed Thu
> St G Mon Tue Wed Fri Sat
> St A Fri Sat Sun Tue Wed
>
> and wish to auto-change the columns to be Year-2..Year+2 for any
> (current) Year, can I use for the St P row five instances of
> <input type=text name=StP size=5 readonly> and compute in turn
> elements [0]..[4] of this array (likewise for other rows), and have
> it working successfully for all reasonable javascript-enabled
> browsers?[/color]

Again, it is no array. But yes, you can. The collections, although
first standardized in W3C-DOM Level 1, is part of the so-called DOM
Level 0, which originates from the 3.0 versions of Netscape and
Internet Explorer.
[color=blue]
> Could I use <div>..</div> with DynWrite thus, instead of <input
> ....>?[/color]

That would be a misuse of the DIV element which should mark a division
of a document (containing text, supposedly paragraphs). You have a
table-like layout and should therefore use table elements, primarily
`table', `tr' and `td'.

PointedEars

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:10 PM

Re: Query on arrays of controls

Thomas 'PointedEars' Lahn <PointedEars@we b.de> writes:
[color=blue]
> Form elements of the same name create a collection which is an object
> having numeric properties (and a length property). It is not an array
> (object).[/color]

The DOM specification doesn't say so. It makes no provision for more
than one control having the same name.
[color=blue]
> http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-75708506[/color]

Actually, the result is not a collection.

In Opera 7, it is an ElementsArray, in Mozilla its a NodeList (the
same type as is returned by getElementsByTa gName). They implement the
interface of an HTMLCollection, though (the method "namedItem" , which
isn't part of a NodeList, and seems to be the only difference between
a NodeList and an HTMLCollection) .

In Mozilla,
document.forms. foo.elements.x instanceof HTMLCollection
gives false, while
document.forms. foo.elements.x instanceof NodeList
gives true.

In IE I don't know what it is, it might be a collection. But it is a
very awkward object, because if you iterate through its properties
with for(...in...), the name occourse once for each control with that
name. That is, the same property name occours more than once during
the iteration.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:25 PM

Re: Query on arrays of controls

Dr John Stockton <spam@merlyn.de mon.co.uk> writes:
[color=blue]
> JRS: In article <y8u137hk.fsf@h otpop.com>, seen in
> news:comp.lang. javascript, Lasse Reichstein Nielsen <lrn@hotpop.com >
> posted at Thu, 27 Nov 2003 21:02:31 :-[/color]
[color=blue][color=green]
>> name="St(2,3)"[/color]
>
> To check whether I understand : while that looks like a quoted C array
> (?) or a function call, it is actually a mere string of three parts -
> Alpha since names should start that way, an up/down part, and a left-
> right part.[/color]

Correct. Since names can contain anything, I decided to use a standard
coordiante notation. In practice, "St_2_3" would probably be better,
and it contains the same information.
[color=blue]
> In addressing, the names would be computed, rather than indexing a
> single name.[/color]

Precisely.
[color=blue]
> If I use separators, they will be ones commonly used in names, probably
> underscores; or even as x12y25 (I can assume 2 digits always suffice.[/color]

Good choice :)
[color=blue]
> But I could, I think, DynWrite[1] the whole Table into a <div> after the
> page is loaded ... which is not needed, so I can document.write it
> during page loading ... which, by parameterising the data, may well
> reduce the page size.[/color]

Yes. If the page critically depends on Javascript anyway, creating the
content with Javascript isn't a problem. If the page can be used
without Javascript, then making it dependent is inferior.
[color=blue]
> The appearance that way would be a lot better than what using
> controls would give; would, in fact, be unchanged.[/color]

Yes, there would be no difference between that table and any other
table, except what you choose.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Thomas 'PointedEars' Lahn** · Jul 20 '05, 12:25 PM

Re: Query on arrays of controls

Dr John Stockton wrote:
[color=blue]
> Thomas 'PointedEars' Lahn [...]:[color=green]
>> Dr John Stockton wrote:[/color][/color]
[color=blue][color=green]
>> which demonstrates that such[color=darkred]
>>> a set of name-matched controls can be accessed as an array there.[/color]
>>
>>It demonstrates that you can access those elements by the index operator
>>`[...]', nothing else.[/color]
>
> That is indistinguishab le.[/color]

Disagreed.
[color=blue]
> My words do not imply having all the properties of an array.[/color]

AIUI, when you access something as an array, it is an Array object,
meaning its constructor function is Array(...). In contrast, when
you access something *like* an array, you access something on which
you can (also) use the index operator to access an element of it.
[color=blue][color=green][color=darkred]
>>> Is that legitimate and generally available?[/color]
>>
>>It is not but only because of F1.B which should read
>>document.form s["F1"].elements["B"].[/color]
>
> Valid, but not relevant to the question.[/color]

It is of course relevant to the question. You asked for general
availability. Nowhere is specified that you can access
document.forms["F1"].elements["B"] with document.F1.B as well.
[color=blue][color=green][color=darkred]
>>> Could I use <div>..</div> with DynWrite thus, instead of <input
>>> ....>?[/color]
>>
>>That would be a misuse of the DIV element which should mark a division
>>of a document (containing text, supposedly paragraphs). You have a
>>table-like layout and should therefore use table elements, primarily
>>`table', `tr' and `td'.[/color]
>
> The only helpful unsolicited observation; but not a well-considered one.
> You have not stated whether <div> *could* be used,[/color]

If I write that it is a misuse it is obvious that it *can* be used but
*should* *not*.
[color=blue]
> nor have you stated whether DynWrite should generally work into a
> named table element.[/color]

I do not know Dynwrite, but suppose it to be a method using
document.write( ...).

BTW: What do you think this is, a support forum or stuff like that?
If you don't like my answers, don't read them. If you don't like my
advice, don't follow it. But at least don't complain about it!

PointedEars

**Michael Winter** · Jul 20 '05, 12:25 PM

Re: Query on arrays of controls

Dr John Stockton wrote on 28 Nov 2003:
[color=blue]
> JRS: In article
> <Xns9440CE9CA85 86MWinterBlueyo nder@193.38.113 .46>, seen in
> news:comp.lang. javascript, Michael Winter
> <M.Winter@bluey onder.co.uk. invalid> posted at Thu, 27 Nov 2003
> 20:18:44 :-[color=green]
>>
>>Two controls in different forms can use the same name, but what
>>Dr Stockton wanted to do was use several text boxes with the
>>same name in the same form, which you cannot do.[/color]
>
> Not so; I have done it.
>
> It may be that one should not do it; or that there is no
> authority for doing it; or that current authority explicitly
> disallows it; or that it does not always work; but it can be
> done.[/color]

In another post (my reply to Mr Nielsen's post of Thu 27 @ 8:29:27),
I suggested that one should ignore what you quoted. I basically
misread the specification and made dangerous assumptions.

Apologies,
Mike

--
Michael Winter
M.Winter@blueyo nder.co.uk.invalid (remove ".invalid" to reply)

Query on arrays of controls

Query on arrays of controls

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment