Query on arrays of controls

D

Dr John Stockton

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.

It therefore occurred to me to try the following crude Web page :

<head></head><body>

<form name=F1>
<input type=text name=A size=3 value=00>
<input type=text name=A size=3 value=11>
<input type=text name=A size=3 value=22>
<input type=button name=B onClick=X() value=" ?? ">
</form>

<script>
J=0

function X() {
F1.B.value = " " + F1.A[J++%3].value + " "
}

</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.

Is that legitimate and generally available? I do not recall reading
it.

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?

Could I use <div>..</div> with DynWrite thus, instead of <input
....>?

I postpone the possibility of having a dynamic column-count such
that there is at least one instance of each of the days of the week
in both the row for Feb 28 and that for Mar 1.
 
M

Michael Winter

Dr John Stockton wrote on 27 Nov 2003:

<input type=button name=B onClick=X() value=" ?? ">

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.

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.

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,
getElementsByName, will return "the (possibly empty) collection of
elements whose name value is given" in the argument to the method.
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?

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.
Could I use <div>..</div> with DynWrite thus, instead of <input
...>?

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
 
L

Lasse Reichstein Nielsen

Dr John Stockton said:
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.

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"><option value="13" selected="selected">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).

J=0

function X() {
F1.B.value = " " + F1.A[J++%3].value + " "
}
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.

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.
Is that legitimate and generally available?

Apart from writing
F.B.value
instead of
document.forms.F.elements.B.value
then yes. (It wouldn't work in Mozilla using F as a global variable)
I do not recall reading it.

I can't find it in the DOM specification.
The HTMLFormDocument'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., getElementsByTagName)

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.
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?

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)"
Could I use <div>..</div> with DynWrite thus, instead of <input
...>?

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.getElementById will
return a collection. That is not portable.

/L
 
L

Lasse Reichstein Nielsen

Michael Winter said:
Only INPUTs of type radio and checkbox can share control names.

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
 
M

Michael Winter

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
Reference? I see no such restriction in the HTML 4.01
specification.

It does *hint* it:

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
 
L

Lasse Reichstein Nielsen

Michael Winter said:
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.

That is what I was asking for a reference for. I can't find that
restriction in the HTML specification.
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.

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=YYY&x=ZZZ".

/L
 
M

Michael Winter

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
Reference? I see no such restriction in the HTML 4.01
specification.

It does *hint* it:
No other control has its name mentioned.

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&address=My+street&address=My+city

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.getElementsByName(). 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 getFormContaining( elementName ) {
var matches = document.getElementsByName( elementName );

return matches[ 0 ].parentNode.name;
}

Mike


I will learn about the DOM someday...
 
M

Michael Winter

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
That is what I was asking for a reference for. I can't find that
restriction in the HTML specification.

Please ignore that - read my other post.

Mike
 
L

Lasse Reichstein Nielsen

Michael Winter said:
...?address=My+house+number&address=My+street&address=My+city

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

I wouldn't depend on the order. Other browsers could change that
without warning
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.getElementsByName().

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

No. The form doesn't need to be the immediate parent node of the
form control (and usually isn't).
return matches[ 0 ].parentNode.name;

return matches[0].form.name;

/L
 
M

Michael Winter

Lasse Reichstein Nielsen wrote on 27 Nov 2003:
I wouldn't depend on the order. Other browsers could change that
without warning

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
 
T

Thomas 'PointedEars' Lahn

Dr said:
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.

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).
<input type=button name=B onClick=X() value=" ?? ">

You must single/double-quote the value of the onclick attribute because
of the `(' and `)'.

The `type' attribute is mandatory.

It is good style to end JavaScript statements with `;'.
function X() {

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

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.
}

</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.

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

It is not but only because of F1.B which should read
document.forms["F1"].elements["B"].
I do not recall reading it.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506

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?

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.
Could I use <div>..</div> with DynWrite thus, instead of <input
....>?

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
 
L

Lasse Reichstein Nielsen

Thomas 'PointedEars' Lahn said:
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).

The DOM specification doesn't say so. It makes no provision for more
than one control having the same name.

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 getElementsByTagName). 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
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen
in Michael Winter <[email protected].
invalid> posted at Thu, 27 Nov 2003 20:18:44 :-
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.

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.
 
T

Thomas 'PointedEars' Lahn

Lasse said:
The DOM specification doesn't say so.

The properties other than `length' are accessed via methods
which are (also) implemented by the index operator.
It makes no provision for more than one control having the same name.

It does make a provision, of course.

,-<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357>
|
| interface HTMLFormElement : HTMLElement {
| readonly attribute HTMLCollection elements;

,-<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
|
| Objects that implement the HTMLFormElement interface:
| Objects that implement the HTMLFormElement interface have all
| properties and functions of the HTMLElement interface as well
| as the properties and functions defined below.
| Properties of objects that implement the HTMLFormElement
| interface:
| elements
| This read-only property is an object that implements the
| HTMLCollection interface.

,-<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506>
|
| interface HTMLCollection {
| readonly attribute unsigned long length;
| Node item(in unsigned long index);
| Node namedItem(in DOMString name);
| };

,-<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
|
| Objects that implement the HTMLCollection interface:
|
| Properties of objects that implement the HTMLCollection interface:
|
| length
| This read-only property is a Number.
|
| Functions of objects that implement the HTMLCollection interface:
|
| item(index)
| This function returns an object that implements the Node
| interface.
| The index parameter is a Number.
| Note: This object can also be dereferenced using square bracket
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| notation (e.g. obj[1]). Dereferencing with an integer index is
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| equivalent to invoking the item function with that index.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
| namedItem(name)
| This function returns an object that implements the Node
| interface.
| The name parameter is a String.
| Note: This object can also be dereferenced using square bracket
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| notation (e.g. obj["foo"]). Dereferencing using a string index
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| is equivalent to invoking the namedItem function with that
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| index.
^^^^^^
| [...]
Actually, the result is not a collection.

I do not agree
In Opera 7, it is an ElementsArray, in Mozilla its a NodeList (the
same type as is returned by getElementsByTagName). 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).

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

Of course.

http://http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/ops.html#1055015
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.

That's strange, though.


PointedEars
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
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)"

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. There would be about 400 of them on the page, & 50 of
<input type=text... . And, for the example above, the names could be
as StG03 (the top row is consecutive years, fewer than 100, and the
first column, while not entirely Sainted, already has TLAs assigned).

In addressing, the names would be computed, rather than indexing a
single name.

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.

Not generally, no. There
...

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. The appearance that way would be a lot better
than what using controls would give; would, in fact, be unchanged.

Presuming that to be workable, the original question is no longer
relevant to the task; but it remains of interest for other applications.

[1] MW: see FAQ.
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
Thomas 'PointedEars' Lahn
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).


You must single/double-quote the value of the onclick attribute because
of the `(' and `)'.

I carefully wrote "the following crude Web page :" and stated my
questions explicitly, with question-marks, in order to make it evident
that I was not in need of comments on any other aspects of the code. By
presenting the minimum required, I made the points at issue easily
visible, at least to those who trouble to understand before answering.


which demonstrates that such
a set of name-matched controls can be accessed as an array there.

It demonstrates that you can access those elements by the index operator
`[...]', nothing else.

That is indistinguishable. My words do not imply having all the
properties of an array.


Is that legitimate and generally available?

It is not but only because of F1.B which should read
document.forms["F1"].elements["B"].

Valid, but not relevant to the question.

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.


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'.

The only helpful unsolicited observation; but not a well-considered one.
You have not stated whether <div> *could* be used, nor have you stated
whether DynWrite should generally work into a named table element.
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
news:comp.lang.javascript said:
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=YYY&x=ZZZ".

That had me confused for a moment; in my application, there is no URL,
since there is no provision for causing action. But the URL is an
important consideration otherwise, and one must verify (if it matters)
that XXX YYY & ZZZ occur in the expected order.
 
L

Lasse Reichstein Nielsen

Thomas 'PointedEars' Lahn said:
It does make a provision, of course.

Correct. It just doesn't let you access more than one of them by name,
and it doesn't say which one it does access.

As your quotes show, the elements collection (which *is* an
HTMLCollection) has a property called namedItem (which can also be
called using square brackets in ECMAScript) which returns *a
Node*. Not more than one. Its type is:
Node namedItem(in DOMString name);
it also says:
---
Return Value
Node The Node with a name or id attribute whose value corresponds
to the specified string. Upon failure (e.g., no node with
this name exists), returns null.
---
It doesn't return a collection (or anything looking like a collection).
I do not agree

It is not an instance of HTMLCollection, according to the "instanceof"
operator. That is what I meant.

It implements the same *interface* as an HTMLCollection. Whether that
makes it an HTMLCollection or not ... I'll leave that to the
philosophers.

/L
 
L

Lasse Reichstein Nielsen

Dr John Stockton said:
JRS: In article <[email protected]>, seen in
Lasse Reichstein Nielsen <[email protected]>
posted at Thu, 27 Nov 2003 21:02:31 :-

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.

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.
In addressing, the names would be computed, rather than indexing a
single name.
Precisely.

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.

Good choice :)
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.

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.
The appearance that way would be a lot better than what using
controls would give; would, in fact, be unchanged.

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

/L
 
T

Thomas 'PointedEars' Lahn

Dr said:
Thomas 'PointedEars' Lahn [...]:
Dr John Stockton wrote:
which demonstrates that such
a set of name-matched controls can be accessed as an array there.

It demonstrates that you can access those elements by the index operator
`[...]', nothing else.

That is indistinguishable.
Disagreed.

My words do not imply having all the properties of an array.

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.
Is that legitimate and generally available?

It is not but only because of F1.B which should read
document.forms["F1"].elements["B"].

Valid, but not relevant to the question.

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.
The only helpful unsolicited observation; but not a well-considered one.
You have not stated whether <div> *could* be used,

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

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,801
Messages
2,569,658
Members
45,421
Latest member
DoreenCorn

Latest Threads

Top