problems with js onchange and radios

Discussion in 'Javascript' started by doc, Apr 18, 2005.

  1. doc

    doc Guest

    Hi,


    <SCRIPT LANGUAGE="JavaScript">
    function check_selection(selection){
    document.pr.n_o[selection][0].checked=true;
    }
    </SCRIPT>

    <form name=pr action=test.php method=post>
    <input type=radio name="n_o[2]" value="yes">yes
    <select name="n_w[2]" onChange="check_selection(2)" >
    .....
    </select>
    </form>

    after changing select object i'm receiving error:
    Error 'document.pr.n_o' is null or not an object.
    Do you have any idea's how to fix it?

    __
    doc.
    doc, Apr 18, 2005
    #1
    1. Advertising

  2. On 18/04/2005 11:00, doc wrote:

    > <SCRIPT LANGUAGE="JavaScript">


    The language attribute is deprecated. Use the (required) type
    attribute instead:

    <script type="text/javascript">

    > function check_selection(selection){
    > document.pr.n_o[selection][0].checked=true;


    There will be no 'n_o' property of the 'pr' object. The proper way to
    go about that would be:

    document.forms['pr'].elements[
    'n_o[' + selection + ']'
    ][0].checked = true;

    Notice that string concatenation is used to create the name, then used
    to access the INPUT element.

    I assume there is more than one 'n_o[2]' form control, so I've left
    the [0] subscript in. If there's only one such control, remove that.

    If this identification scheme is consistent (that is, n_w[1] changes
    n_o[1], and n_w[3] changes n_o[3], etc.) whenever check_selection is
    called, you could simplify the call a bit:

    function checkSelection(s) {
    s.form.elements[
    'n_o[' + /\[(\d+)\]/.exec(s.name)[1] + ']'
    ][0].checked = true;
    }

    <select ... onchange="checkSelection(this);">

    [snip]

    Hope that helps,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 18, 2005
    #2
    1. Advertising

  3. doc

    RobG Guest

    doc wrote:
    > Hi,
    >
    >
    > <SCRIPT LANGUAGE="JavaScript">


    The language attribute is depreciated, type is required:

    <script type="text/javascript">

    > function check_selection(selection){
    > document.pr.n_o[selection][0].checked=true;


    This seems to be trying to refer to a form with a name 'pr', an
    element collection with a name 'n_o' and element index 'selection'
    which itself is a collection... and that's where your trouble is.

    If you want to use the syntax you have constructed, then:

    document.pr.elements['n_o[' + selection + ']'].checked = true;

    will do the trick. A more robust version is:

    document.forms['pr'].elements['n_o[' + selection + ']'].checked=true;

    I'd suggest not using square brackets this way, use some other
    character such as '-', '.' or '_' to separate your pseudo-index from
    the name.

    "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
    followed by any number of letters, digits ([0-9]), hyphens ("-"),
    underscores ("_"), colons (":"), and periods (".")."

    <URL:http://www.w3.org/TR/html4/types.html#type-cdata>

    > }
    > </SCRIPT>
    >
    > <form name=pr action=test.php method=post>


    While it is not mandatory to quote attributes, it is always a good
    idea and (AFAIKR) all examples the W3C HTML spec use quotes:

    <form name="pr" action="test.php" method="post">

    > <input type=radio name="n_o[2]" value="yes">yes
    > <select name="n_w[2]" onChange="check_selection(2)" >


    When passing a digit that is to be used as a string, it may be better
    to pass it as a string, although in this case it doesn't matter but
    it may make it more obvious to someone else trying to maintain your
    code:

    <select name="n_w[2]" onChange="check_selection('2')">

    > .....
    > </select>
    > </form>
    >
    > after changing select object i'm receiving error:
    > Error 'document.pr.n_o' is null or not an object.
    > Do you have any idea's how to fix it?


    Working version:

    <script type="text/javascript">
    function check_selection(selection){
    document.pr.elements['n_o[' + selection + ']'].checked = true;
    }
    </script>

    <form name="pr" action="">
    <input type=radio name="n_o[2]" value="yes">yes
    <select name="n_w[2]" onChange="check_selection('2')">
    <option>one</option>
    <option>two</option>
    </select>
    <input type="reset">
    </form>



    --
    Rob
    RobG, Apr 18, 2005
    #3
  4. On 18/04/2005 12:00, RobG wrote:

    [snip]

    > I'd suggest not using square brackets this way, use some other
    > character such as '-', '.' or '_' to separate your pseudo-index from
    > the name.
    >
    > "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
    > followed by any number of letters, digits ([0-9]), hyphens ("-"),
    > underscores ("_"), colons (":"), and periods (".")."
    >
    > <URL:http://www.w3.org/TR/html4/types.html#type-cdata>


    The name attribute for form controls has a CDATA value, not ID or
    NAME. The form used by the OP is perfectly acceptable.

    Mike


    Only META elements have a name attribute that is of NAME type. The
    only other attribute with type NAME, http-equiv, also belongs to the
    META element.

    The only attribute of ID type is, as you would expect, the id
    attribute. However, the for attribute of LABEL, and the headers
    attribute of TD and TH, are of type IDREF and IDREFS, respectively. As
    these contain ID values, they too are limited to ID characters (though
    IDREFS allows spaces a delimiter).

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 18, 2005
    #4
  5. doc

    RobG Guest

    Michael Winter wrote:
    > On 18/04/2005 12:00, RobG wrote:
    >
    > [snip]
    >
    >> I'd suggest not using square brackets this way, use some other
    >> character such as '-', '.' or '_' to separate your pseudo-index from
    >> the name.
    >>
    >> "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
    >> followed by any number of letters, digits ([0-9]), hyphens ("-"),
    >> underscores ("_"), colons (":"), and periods (".")."
    >>
    >> <URL:http://www.w3.org/TR/html4/types.html#type-cdata>

    >
    >
    > The name attribute for form controls has a CDATA value, not ID or NAME.
    > The form used by the OP is perfectly acceptable.
    >
    > Mike
    >
    >
    > Only META elements have a name attribute that is of NAME type. The only
    > other attribute with type NAME, http-equiv, also belongs to the META
    > element.
    >
    > The only attribute of ID type is, as you would expect, the id attribute.
    > However, the for attribute of LABEL, and the headers attribute of TD and
    > TH, are of type IDREF and IDREFS, respectively. As these contain ID
    > values, they too are limited to ID characters (though IDREFS allows
    > spaces a delimiter).
    >


    One day I will work out how to understand the spec...

    For the record, the spec says that an input must have a name
    attribute to be successful (they're kinda useful for other things
    too). Names are cdata and a link is given to the URL above.

    I now realise that the reference to ID and NAME tokens listed just
    below CDATA actually refers to SGML basic types and not HTML element
    attributes. The fact that the page is headed 'HTML Basic Types' just
    added to the confusion - the semantics of /type/ versus /attribute/
    plumb evaded me... now there's a surprise.


    --
    Rob
    RobG, Apr 19, 2005
    #5
  6. On 19/04/2005 00:47, RobG wrote:

    > Michael Winter wrote:


    [snip]

    >> Only META elements have a name attribute that is of NAME type. The
    >> only other attribute with type NAME, http-equiv, also belongs to the
    >> META element.


    Oops. I forgot to check the entities, wherein %LanguageCode; is NAME,
    and applies to hreflang (A, LINK), and lang (various).

    [snip]

    > One day I will work out how to understand the spec...


    When you look at the details of each attribute, you'll see this
    general format:

    <attr> = <type> [<case>]

    In other words, the attribute name, followed by its type, and an
    abbreviation that indicates if and how case is significant. For example,

    id = name [CS]

    The id attribute is of type NAME, and is Case-Sensitive.

    type = content-type [CI]

    The type attribute is of type %ContentType; (an entity that expands to
    CDATA), and is Case-Insensitive.

    style = style [CN]

    The style attribute is of type %StyleSheet; (an entity that expands to
    CDATA), and is Case-Neutral[1].

    [snip]

    Mike


    [1] Case-neutral isn't necessarily the same as case-insensitive.
    CN tends to be used in situations where the notion of case is
    meaningless, for example when numbers or punctuation might be
    a value.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 19, 2005
    #6
    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. Angela

    Formatting Radios

    Angela, Jul 30, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,051
    Angela
    Jul 30, 2004
  2. Angela

    onselectedindexchanged on Radios

    Angela, Nov 22, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    414
    Angela
    Nov 22, 2004
  3. Mirovk
    Replies:
    0
    Views:
    105
    Mirovk
    Sep 1, 2006
  4. Andy Goldstein

    onClick, onChange problems with form submit

    Andy Goldstein, Jul 12, 2004, in forum: Javascript
    Replies:
    2
    Views:
    311
    Thomas 'PointedEars' Lahn
    Jul 14, 2004
  5. DonD
    Replies:
    2
    Views:
    216
Loading...

Share This Page