Multiple select elements with same name

[Sam Kong]

Hello,

There are 1 or more select elements with the same name in a form.
Let's say that the name of the select is 'select1' and the name of the
form is 'form1'.
If there's only one select I access it like form1.select1.
If there are more than one select, I access them like
form1.select1[index].

To check if there are more than one, I thought I can use
if (form1.select1.length) {
....
}
else {
....
}

But that doesn't work because if there's only one select,
form1.select1.length is a valid property which is the length of
options.

How do you usually handle this problem?

Thanks in advance.

Sam

 

[Lee]

Sam Kong said:

Hello,

There are 1 or more select elements with the same name in a form.
Let's say that the name of the select is 'select1' and the name of the
form is 'form1'.
If there's only one select I access it like form1.select1.
If there are more than one select, I access them like
form1.select1[index].

To check if there are more than one, I thought I can use
if (form1.select1.length) {
...
}
else {
...
}

But that doesn't work because if there's only one select,
form1.select1.length is a valid property which is the length of
options.

How do you usually handle this problem?

I think the usual thing to do would be to change one of the names.


--

 

[Daz]

Hello,

There are 1 or more select elements with the same name in a form.
Let's say that the name of the select is 'select1' and the name of the
form is 'form1'.
If there's only one select I access it like form1.select1.
If there are more than one select, I access them like
form1.select1[index].

To check if there are more than one, I thought I can use
if (form1.select1.length) {
...}

else {
...

}

But that doesn't work because if there's only one select,
form1.select1.length is a valid property which is the length of
options.

How do you usually handle this problem?

Thanks in advance.

Sam

var elements = document.getElementsByName("select1");

This returns an array of elements with the specified name.

You can then iterate through it if you want, and do stuff with each,
or just use "length" to see how many there are.

alert(elements.length);

Lee's proposed solution is not a bad one. Whilst names are not like
ids (in the sense that they don't have to be unique), I don't see any
point in having more than one element with the same name. You will
most likely find yourself running into a lot of problems.

I find it good practice to give anything that needs to be identified a
name and an id. The id and the name should match, thus giving you a
unique name for everything that needs one. Obviously, if it's
something that doesn't need an id, but only a name, or vice-versa,
then don't give it one. But if you give one element an id of
"select1", even if you don't give it a name, I would consider
"select1" to be out of use for any other element names. You will find
that coding like this helps you understand things and saves you a lot
of time fixing problems.

All the best.

Daz.

 

[Sam Kong]

Hello,

There are 1 or more select elements with the same name in a form.
Let's say that the name of the select is 'select1' and the name of the
form is 'form1'.
If there's only one select I access it like form1.select1.
If there are more than one select, I access them like
form1.select1[index].

To check if there are more than one, I thought I can use
if (form1.select1.length) {
...}

else {
...

But that doesn't work because if there's only one select,
form1.select1.length is a valid property which is the length of
options.

How do you usually handle this problem?

Thanks in advance.

Sam

var elements = document.getElementsByName("select1");

This returns an array of elements with the specified name.

You can then iterate through it if you want, and do stuff with each,
or just use "length" to see how many there are.

alert(elements.length);

Lee's proposed solution is not a bad one. Whilst names are not like
ids (in the sense that they don't have to be unique), I don't see any
point in having more than one element with the same name. You will
most likely find yourself running into a lot of problems.

I find it good practice to give anything that needs to be identified a
name and an id. The id and the name should match, thus giving you a
unique name for everything that needs one. Obviously, if it's
something that doesn't need an id, but only a name, or vice-versa,
then don't give it one. But if you give one element an id of
"select1", even if you don't give it a name, I would consider
"select1" to be out of use for any other element names. You will find
that coding like this helps you understand things and saves you a lot
of time fixing problems.

All the best.

Daz.

Daz,

Thank you for the kind answer.
I think you provided the right solution and good advice.

Sam

 

[ASM]

Sam Kong a écrit :

Hello,

There are 1 or more select elements with the same name in a form.
Let's say that the name of the select is 'select1' and the name of the
form is 'form1'.
If there's only one select I access it like form1.select1.
If there are more than one select, I access them like
form1.select1[index].

To check if there are more than one, I thought I can use
if (form1.select1.length) {
...
}
else {
...
}

But that doesn't work because if there's only one select,
form1.select1.length is a valid property which is the length of
options.

if (form1.select1 &&
form1.select1.length != form1.select1.options.length) {
alert(form1.select1.length+' select1');
}
else
if (form1.select1 &&
form1.select1.length == form1.select1.options.length) {
alert('only one select1');
}
else
alert('no select1');

How do you usually handle this problem?

I do not give same name to my elements ...

or

if(
document.getElementsByName('select1') &&
document.getElementsByName('select1').length >=1
)
alert(document.getElementsByName('select1').length+' select1')


or for elements of a particular form :

if(
document.form1.getElementsByName('select1') &&
document.form1.getElementsByName('select1').length >=1
)
alert(document.form1.getElementsByName('select1').length+' select1')

 

[Matt Kruse]

Lee's proposed solution is not a bad one. Whilst names are not like
ids (in the sense that they don't have to be unique), I don't see any
point in having more than one element with the same name.

Have you done much web development?

Having multiple inputs of the same name is not only extremely useful,
but perfectly allowable by all standards. If it causes any minor
javascript annoyances, those can be easily worked around.

Matt Kruse

 

[scripts.contact]

Sam Kong a écrit :

Hello,

There are 1 or more select elements with the same name in a form.
Let's say that the name of the select is 'select1' and the name of the
form is 'form1'.
If there's only one select I access it like form1.select1.
If there are more than one select, I access them like
form1.select1[index].

To check if there are more than one, I thought I can use
if (form1.select1.length) {
...
}
else {
...
}

But that doesn't work because if there's only one select,
form1.select1.length is a valid property which is the length of
options.

if (form1.select1 &&
form1.select1.length != form1.select1.options.length) {
alert(form1.select1.length+' select1');
}
else
if (form1.select1 &&
form1.select1.length == form1.select1.options.length) {
alert('only one select1');
}

or
var select=form1.select1;
if(select.length>1)
alert("2 or more selects")
else
alert("only one")

if(
document.getElementsByName('select1') &&
document.getElementsByName('select1').length >=1
)

There is no need to check getElementsByTagName(xx) because it will
always return a nodelist (==true) if the function is supported.
to check for function, use:

if(
document.getElementsByName &&
document.getElementsByName('select1').length >=1
)

 

[ASM]

scripts.contact a écrit :

or
var select=form1.select1;
if(select.length>1)
alert("2 or more selects")
else
alert("only one")

No, because as said :

and :
else alert("only one")
could fire if there is NO select1

There is no need to check getElementsByTagName(xx) because it will
always return a nodelist (==true)

Oooops !

 

[scripts.contact]

No, because as said :


and :
else alert("only one")
could fire if there is NO select1

Oooops!

 

[RobG]

The real "oooops" here is that checking the length property is a silly
way of trying to distinguish between a select element and a NodeList -
it is the only property that the two have in common. It is also
likely that the length will be the same for both - either two selects
or one select with two options will return an object with a length of
two.

I think a better strategy is to check for the name property - a
NodeList doesn't have one, the select element must (in this case) so:

var select = document.forms['form1'].elements['select1'];
if (select.name == 'select1') {
/* select is a select element */
} else {
/* select is a NodeList */
}

 

[ASM]

RobG a écrit :

[...]
I think a better strategy is to check for the name property - a
NodeList doesn't have one, the select element must (in this case) so:

var select = document.forms['form1'].elements['select1'];
if (select.name == 'select1') {
/* select is a select element */
} else {
/* select is a NodeList */
}

Not too bad

 

[Daz]

Have you done much web development?

Having multiple inputs of the same name is not only extremely useful,
but perfectly allowable by all standards. If it causes any minor
javascript annoyances, those can be easily worked around.

Matt Kruse

No, I am fairly new to Web development. I know it's allowed to have
multiple names by all standards, I just don't see much of a point to
it.

Please could you post an example of where having identically named
elements would be "extremely useful"? I've never had the need to use
them, hence why I don't see the point. Perhaps if the need arose, then
of course, I would. From what the OP posted, I can't see any reason
why he should need the HTML to remain the way it is.

Thanks.

 

[Matt Kruse]

Daz said the following on 5/17/2007 12:02 PM:

On 'grid' forms with a variable number of rows containing identical
inputs in each column.
Each input in each column is given the same name, and the values are
just treated as arrays when they get to the server. That way if you
want the "name" field from row 10, you just look at name[9] (or
whatever syntax, given your language of choice). The alternative is to
use a name like name_10 with the index in the name itself, but that is
far more hassle than it's worth. Plus, when you dynamically (client-
side) add new rows to be edited you can just copy a template row and
you don't have to worry about renaming inputs, etc.

And it makes them impossible to use
the forms collection to get a reference to them using the name attribute
(other than RB and CB'es).

Why?

document.forms['myform'].elements['name'][9] gives you the 10th input
with the name "name".

You're just used to it with radio buttons and checkboxes so it feels
natural with those and not with 'normal' inputs.

Matt Kruse

 

[RobG]

Please could you post an example of where having identically named
elements would be "extremely useful"?

Whenever an attribute or property can have multiple values - e.g. an
element's class attribute, or where you might use a multiple select
but want to use two (or three or four) separate selects.

 

[Daz]

On 'grid' forms with a variable number of rows containing identical
inputs in each column.
Each input in each column is given the same name, and the values are
just treated as arrays when they get to the server. That way if you
want the "name" field from row 10, you just look at name[9] (or
whatever syntax, given your language of choice). The alternative is to
use a name like name_10 with the index in the name itself, but that is
far more hassle than it's worth. Plus, when you dynamically (client-
side) add new rows to be edited you can just copy a template row and
you don't have to worry about renaming inputs, etc.

Aaaah, yes, of course! I had read about that before, but never
actually made use of it. I think that's the solution to a problem I
experienced with one of my first projects. Thanks for setting me
straight.

 

[Daz]

I had something else in mind when I wrote it. Hadn't really thought
about the way you did it as I have never had a reason to do it

Same here! Hehe.