how to access form elements with numbers as names

Discussion in 'Javascript' started by Jon Hoowes, Sep 14, 2005.

  1. Jon Hoowes

    Jon Hoowes Guest

    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
     
    Jon Hoowes, Sep 14, 2005
    #1
    1. Advertising

  2. Jon Hoowes

    Erwin Moller Guest

    Jon Hoowes wrote:

    > 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, Sep 14, 2005
    #2
    1. Advertising

  3. Jon Hoowes

    Erwin Moller Guest


    > 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
     
    Erwin Moller, Sep 14, 2005
    #3
  4. Jon Hoowes

    Jon Hoowes Guest


    > 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
     
    Jon Hoowes, Sep 14, 2005
    #4
  5. Jon Hoowes

    Matt Kruse Guest

    Jon Hoowes wrote:
    > 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.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
     
    Matt Kruse, Sep 14, 2005
    #5
  6. Matt Kruse wrote:

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

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Sep 14, 2005
    #6
  7. Jon Hoowes

    Lee Guest

    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.
     
    Lee, Sep 14, 2005
    #7
  8. Jon Hoowes

    RobG Guest

    David Dorward wrote:
    > Matt Kruse wrote:
    >
    >
    >>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.
    >


    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>

    --
    Rob
     
    RobG, Sep 15, 2005
    #8
  9. Jon Hoowes

    Jon Hoowes Guest

    > 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
     
    Jon Hoowes, Sep 15, 2005
    #9
  10. Jon Hoowes

    Matt Kruse Guest

    Jon Hoowes wrote:
    > 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.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
     
    Matt Kruse, Sep 15, 2005
    #10
  11. Jon Hoowes

    RobG Guest

    Jon Hoowes wrote:
    >>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>



    --
    Rob
     
    RobG, Sep 15, 2005
    #11
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paddy McCarthy
    Replies:
    3
    Views:
    753
    Anthony J Bybell
    Sep 24, 2004
  2. Jukka K. Korpela
    Replies:
    3
    Views:
    794
    Michael Winter
    Mar 6, 2004
  3. Michael Winter
    Replies:
    4
    Views:
    623
    Lasse Reichstein Nielsen
    Mar 6, 2004
  4. Robert
    Replies:
    0
    Views:
    528
    Robert
    Mar 6, 2004
  5. Replies:
    4
    Views:
    210
Loading...

Share This Page