how to access form elements with numbers as names

[Jon Hoowes]

Hi,

I have inherited some code that has some form elements (radio buttons)
that are called "1", "2" etc.

for example:

<input name="2" type="radio" value="45">
<input name="2" type="radio" value="46">


I want to be able to access them through javascript to disable them;

forms.myform.2[0].disabled=true;

etc.
however I get a javascript error when I try to do this (something about a
missing semicolon).
My javascript skills are fine and I have other elements being disabled OK,
so I assume that this is a problem with the way that the elements were
named.

Unfortunately I don't have the option of renaming the elements. Is there
another way to access these elements?
I have tried:

var temp=forms.myform.2;
temp[0].disabled=true;

But I get the same missing semicolon error on the "var temp=..." line

Any thoughts appreciated!

Cheers,

Ben

 

[Erwin Moller]

Hi,

I have inherited some code that has some form elements (radio buttons)
that are called "1", "2" etc.

for example:

<input name="2" type="radio" value="45">
<input name="2" type="radio" value="46">


I want to be able to access them through javascript to disable them;

forms.myform.2[0].disabled=true;

etc.
however I get a javascript error when I try to do this (something about a
missing semicolon).
My javascript skills are fine and I have other elements being disabled OK,
so I assume that this is a problem with the way that the elements were
named.

Unfortunately I don't have the option of renaming the elements. Is there
another way to access these elements?
I have tried:

var temp=forms.myform.2;
temp[0].disabled=true;

But I get the same missing semicolon error on the "var temp=..." line

Any thoughts appreciated!

Cheers,

Ben

Hi Ben,

Maybe stringnotation helps? (not sure)

var temp=forms.myform["2"];
temp[0].disabled=true;

If not, try debugging by using alert.
Like:
var temp=forms.myform["2"];
alert (tmp);
temp[0].disabled=true;

is tmp pointing to a radio-object?

And yes: Strange design to name your elements like that. :-/

Regards,
Erwin Moller

 

[Erwin Moller]

Hi Ben,

Maybe stringnotation helps? (not sure)

var temp=forms.myform["2"];
temp[0].disabled=true;

If not, try debugging by using alert.
Like:
var temp=forms.myform["2"];
alert (tmp);
temp[0].disabled=true;

is tmp pointing to a radio-object?

And yes: Strange design to name your elements like that. :-/

Regards,
Erwin Moller

One more thing, I always use document too before adressing elements.
So:
var temp=document.forms.myform["2"];

Regards,
Erwin Moller

 

[Jon Hoowes]

Maybe stringnotation helps? (not sure)

var temp=forms.myform["2"];
temp[0].disabled=true;

This works, but doesn't allow me to access the elements by their "name"

And yes: Strange design to name your elements like that. :-/

It's a system that builds a form based on database information. The
primary key, which is a number, determines the name of the element.

This is also why the suggestion you made is not suitable - it works, but I
cannot guarantee the order of each element within the form

Cheers anyway!

Jon

 

[Matt Kruse]

I have inherited some code that has some form elements (radio buttons)
that are called "1", "2" etc.

The core problem is the fact that form element names cannot begin with a
number.
It's invalid HTML.
Therefore, your javascript cannot be expected to work.

You must rename the form elements.

 

[David Dorward]

The core problem is the fact that form element names cannot begin with a
number.

NAME tokens cannot start with a number, but the value of the name attribute
is not a NAME token. Form control names may begin with a number.

 

[Lee]

Jon Hoowes said:

Maybe stringnotation helps? (not sure)

var temp=forms.myform["2"];
temp[0].disabled=true;

This works, but doesn't allow me to access the elements by their "name"

And yes: Strange design to name your elements like that. :-/

It's a system that builds a form based on database information. The
primary key, which is a number, determines the name of the element.

It would be fine to allow the numeric key to *determine* the name
of the element, but it was a bad decision to allow the numeric key
to *be* the name of the element. Surely your developers can figure
out how to translate the key "2" into "element_2", or some other
valid name.

 

[RobG]

Matt Kruse wrote:




NAME tokens cannot start with a number, but the value of the name attribute
is not a NAME token. Form control names may begin with a number.

Yes, the value of an HTML name attribute is CDATA. The ID attribute is
a NAME token and can't start with a number - easily confused!

Name:
<URL:http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT>

ID:
<URL:http://www.w3.org/TR/html4/struct/global.html#adef-id>

 

[Jon Hoowes]

It would be fine to allow the numeric key to *determine* the name

of the element, but it was a bad decision to allow the numeric key
to *be* the name of the element. Surely your developers can figure
out how to translate the key "2" into "element_2", or some other
valid name.

I agree 100%, but I don't have any way to update the code that takes the
script - it is on a separate system and although I have asked them to
change it, I don't think they want to, hence wondering if there is anyway
to access the element without changing the element name...

Cheers,

Jon

 

[Matt Kruse]

I agree 100%, but I don't have any way to update the code that takes
the script - it is on a separate system and although I have asked
them to change it, I don't think they want to, hence wondering if
there is anyway to access the element without changing the element
name...

Sorry for the mistake about the name not starting with a number. My bad!

An alternative - write a custom function which loops through all the form
elements, checking their .name property. When you find one that matches,
return it.

It wouldn't be super efficient, but it would probably do what you need.

 

[RobG]

Maybe stringnotation helps? (not sure)

var temp=forms.myform["2"];
temp[0].disabled=true;

This works, but doesn't allow me to access the elements by their "name"

And yes: Strange design to name your elements like that. :-/

It's a system that builds a form based on database information. The
primary key, which is a number, determines the name of the element.

This is also why the suggestion you made is not suitable - it works, but I
cannot guarantee the order of each element within the form

So let's get this straight. You have a form with some sets of radio
buttons. You are given a number from some other function that you then
want to use as the name of a group of radio buttons.

So you may have a form with:

<form name="formA" ...>
<br>
<input type="radio" name="1" ...>
<input type="radio" name="1" ...>
<br>
<input type="radio" name="2" ...>
<input type="radio" name="2" ...>
</form>

You are given an number, say '2', and you want to disable the radio
buttons belonging to that group.

JavaScript does automatic type conversion, it seems that when you try to
access the element using '2' as a name it is converted to a number,
making it very hard to use.

So use the auto-type conversion to your advantage using an 'if' and
iterate over all the inputs and disable any that have a name that
matches 2.

'if' will type convert too, so it will turn the number back into a
string if it needs to.

<script type="text/javascript">

// Just a dummy function to return a number
function getNumber()
{
return 2;
}

function disableButtons( f )
{
var nameToUse = getNumber();
var el, els = f.getElementsByTagName('input');
var i = els.length;
while ( i-- ) {
el = els
if ( 'radio' == el.type && nameToUse == el.name ) {
el.disabled = true;
}
}
}
</script>

<form name="formA" ...>
<br>
<input type="radio" name="1" ...>
<input type="radio" name="1" ...>
<br>
<input type="radio" name="2" value="2-1">
<input type="radio" name="2" value="2-2">
<br>
<input type="button" value="disable set 2" onclick="
disableButtons(this.form);
">
<input type="reset">
</form>