Check if radio button is checked

Discussion in 'Javascript' started by Vancouver, Mar 12, 2008.

  1. Vancouver

    Vancouver Guest

    Hi there,

    I have 24 radio button groups, and 7 options for each group. I wrote
    code below trying to see if each radio button group is checked. But it
    does not work. Any help? Thanks.

    (24 radio button groups are named question[0] to question[23].
    choices[] is to store true/false)

    <script type="text/JavaScript">
    function ifChecked()
    {
    var choices=new Array();

    for (index=0;index<24;index++)
    {
    choices[index]=false;
    for (i=0;i<7;i++)
    {
    if (document.forms[0].question[index].checked)
    {
    choices[index]=true;
    break;
    }

    }
    }
    for (index=0;index<24;index++)
    {
    if (!choices[index])
    {
    alert ("Please make a selection");
    return false;
    }
    }
    return true;
    }
    </script>
    Vancouver, Mar 12, 2008
    #1
    1. Advertising

  2. Vancouver

    Vancouver Guest

    On Mar 12, 4:03 am, Vancouver <> wrote:
    > Hi there,
    >
    > I have 24 radio button groups, and 7 options for each group. I wrote
    > code below trying to see if each radio button group is checked. But it
    > does not work. Any help? Thanks.
    >
    > (24 radio button groups are named question[0] to question[23].
    > choices[] is to store true/false)
    >
    > <script type="text/JavaScript">
    > function ifChecked()
    > {
    > var choices=new Array();
    >
    > for (index=0;index<24;index++)
    > {
    > choices[index]=false;
    > for (i=0;i<7;i++)
    > {
    > if (document.forms[0].question[index].checked)
    > {
    > choices[index]=true;
    > break;
    > }
    >
    > }
    > }
    > for (index=0;index<24;index++)
    > {
    > if (!choices[index])
    > {
    > alert ("Please make a selection");
    > return false;
    > }
    > }
    > return true;}
    >
    > </script>


    I managed to know why:

    instead of if (document.forms[0].question[index].checked)
    I need to a line like this: var name="question["+index+"]["+i+"]";,
    and then: if (document.form1.name.checked)

    But why? (Otherwise I get a null object) Why I cannot call
    ocument.forms[0].question[index].checked directly?

    Thanks
    Vancouver, Mar 12, 2008
    #2
    1. Advertising

  3. Vancouver

    Vancouver Guest

    On Mar 12, 4:31 am, Vancouver <> wrote:
    > On Mar 12, 4:03 am, Vancouver <> wrote:
    >
    >
    >
    > > Hi there,

    >
    > > I have 24 radio button groups, and 7 options for each group. I wrote
    > > code below trying to see if each radio button group is checked. But it
    > > does not work. Any help? Thanks.

    >
    > > (24 radio button groups are named question[0] to question[23].
    > > choices[] is to store true/false)

    >
    > > <script type="text/JavaScript">
    > > function ifChecked()
    > > {
    > > var choices=new Array();

    >
    > > for (index=0;index<24;index++)
    > > {
    > > choices[index]=false;
    > > for (i=0;i<7;i++)
    > > {
    > > if (document.forms[0].question[index].checked)
    > > {
    > > choices[index]=true;
    > > break;
    > > }

    >
    > > }
    > > }
    > > for (index=0;index<24;index++)
    > > {
    > > if (!choices[index])
    > > {
    > > alert ("Please make a selection");
    > > return false;
    > > }
    > > }
    > > return true;}

    >
    > > </script>

    >
    > I managed to know why:
    >
    > instead of if (document.forms[0].question[index].checked)
    > I need to a line like this: var name="question["+index+"]["+i+"]";,
    > and then: if (document.form1.name.checked)
    >
    > But why? (Otherwise I get a null object) Why I cannot call
    > ocument.forms[0].question[index].checked directly?
    >
    > Thanks


    Too bad. I had thought I fixed the issue but it turns out I am wrong.
    I still cannot make it work. Any help is highly appreciated.

    Thanks,
    Vancouver, Mar 12, 2008
    #3
  4. Vancouver

    Henry Guest

    On Mar 12, 11:31 am, Vancouver wrote:
    > On Mar 12, 4:03 am, Vancouver wrote:

    <snip>
    >> if (document.forms[0].question[index].checked)

    <snip>
    >
    > I managed to know why:
    >
    > instead of if (document.forms[0].question[index].checked)
    > I need to a line like this: var name="question["+index+"]["+i+"]";,
    > and then: if (document.form1.name.checked)


    That will not work. There is no substitution of the contents of a
    variable named 'name' for the Identifier 'name' used in a property
    accessor. In practice you want to use a bracket notation property
    accessor here, such as:-

    document.forms[0].elements[("question["+index+"]")].checked

    See:-

    <URL: http://www.jibbering.com/faq/faq_notes/square_brackets.html >

    > But why? (Otherwise I get a null object) Why I cannot call
    > document.forms[0].question[index].checked directly?


    You can, it just does not mean anything sensible in relation to what
    you are doing.

    Once you understand the role of square brackets in javascript syntax
    you should see how it would be impractical to allow them to also be
    part of an Identifier.
    Henry, Mar 12, 2008
    #4
  5. Vancouver

    Vancouver Guest

    On Mar 12, 5:20 am, Henry <> wrote:
    > On Mar 12, 11:31 am, Vancouver wrote:
    >
    > > On Mar 12, 4:03 am, Vancouver wrote:

    > <snip>
    > >> if (document.forms[0].question[index].checked)

    > <snip>
    >
    > > I managed to know why:

    >
    > > instead of if (document.forms[0].question[index].checked)
    > > I need to a line like this: var name="question["+index+"]["+i+"]";,
    > > and then: if (document.form1.name.checked)

    >
    > That will not work. There is no substitution of the contents of a
    > variable named 'name' for the Identifier 'name' used in a property
    > accessor. In practice you want to use a bracket notation property
    > accessor here, such as:-
    >
    > document.forms[0].elements[("question["+index+"]")].checked
    >
    > See:-
    >
    > <URL:http://www.jibbering.com/faq/faq_notes/square_brackets.html>
    >
    > > But why? (Otherwise I get a null object) Why I cannot call
    > > document.forms[0].question[index].checked directly?

    >
    > You can, it just does not mean anything sensible in relation to what
    > you are doing.
    >
    > Once you understand the role of square brackets in javascript syntax
    > you should see how it would be impractical to allow them to also be
    > part of an Identifier.


    Thanks Henry.

    I am confused. In another page, I have a radio group named myUnique
    and I use this to see if it is checked:

    <script type="text/JavaScript">
    function ifChecked()
    {
    for (i=0;i<document.form1.myUnique.length;i++)
    {
    if (document.form1.myUnique.checked)
    return true;
    }
    alert ("Please make a selection");
    return false;
    }
    </script>

    It works.

    I do not understand why similar code does not work in a multiple radio
    groups page.

    The only difference is that in the myUnique page, I just have one
    radio group; in the other page, I have 24 groups, question[0] to
    question[23].

    Isn't document.FORM.RADIO_GROUP_NAME an identifier for this radio
    group? I think I shall be able to traverse all options by
    document.FORM.RADIO_GROUP_NAME.[index] (index=1 to the length of the
    radio group)

    Thank you,
    Vancouver, Mar 12, 2008
    #5
  6. Vancouver

    Henry Guest

    On Mar 12, 12:45 pm, Vancouver wrote:
    > On Mar 12, 5:20 am, Henry wrote:

    <snip>
    > I do not understand why similar code does not work in a
    > multiple radio groups page.
    >
    > The only difference is that in the myUnique page, I just have one
    > radio group; in the other page, I have 24 groups, question[0] to
    > question[23].
    >
    > Isn't document.FORM.RADIO_GROUP_NAME an identifier for this
    > radio group?


    In that case 'FORM.RADIO_GROUP_NAME' is a name of a property of the
    document object. In the context of - document.FORM.RADIO_GROUP_NAME -
    it is an Identifier used in a dot notation property accessor to access
    the value of the property of the document object with the
    corresponding name. The equivalent bracket notation property accessor;
    - document['FORM.RADIO_GROUP_NAME'] - could also be used to access the
    value of the property of the document object named
    'FORM.RADIO_GROUP_NAME'.

    The items on each side of the dots in a dot notation property accessor
    must satisfy the javascript language syntax rules that define an
    Identifier, and an Identifier cannot contain square bracket
    characters. But the names of the properties of objects are
    unrestricted. That is, they may take forms that could not qualify as
    Identifiers under the language's syntax rules. So an object may have a
    property named "question[23]" but a dot notation property accessor
    could never be used to access the value of that property, but a
    bracket notion property accessor could because the items inside the
    brackets are evaluated to strings, and string may include any
    characters at all.


    > I think I shall be able to traverse all options by
    > document.FORM.RADIO_GROUP_NAME.[index] (index=1 to the length of the
    > radio group)


    No, that is a syntax error; you cannot put a dot just before an
    opening square bracket in a property accessor.
    Henry, Mar 12, 2008
    #6
  7. Vancouver

    SAM Guest

    Vancouver a écrit :
    > Hi there,
    >
    > I have 24 radio button groups, and 7 options for each group. I wrote
    > code below trying to see if each radio button group is checked. But it
    > does not work. Any help? Thanks.
    >
    > (24 radio button groups are named question[0] to question[23].
    > choices[] is to store true/false)
    >
    > <script type="text/JavaScript">
    > function ifChecked()
    > {
    > var choices=new Array();
    >
    > for (index=0;index<24;index++)
    > {
    > choices[index]=false;
    > for (i=0;i<7;i++)
    > {
    > if (document.forms[0].question[index].checked)


    document.forms[0].elements['question['+index+']'].checked

    > {
    > choices[index]=true;
    > break;


    Why that 'break' ?

    > }
    >
    > }
    > }
    > for (index=0;index<24;index++)
    > {
    > if (!choices[index])
    > {
    > alert ("Please make a selection");
    > return false;
    > }
    > }
    > return true;
    > }
    > </script>
    SAM, Mar 12, 2008
    #7
  8. Vancouver

    SAM Guest

    Vancouver a écrit :
    >
    > The only difference is that in the myUnique page, I just have one
    > radio group; in the other page, I have 24 groups, question[0] to
    > question[23].


    yes and question[n] must be a string that's to say : "question[n]"
    If not, it is an array's element ... !

    and myForm.question[n] will not be correct as it is an array
    (element of an array)
    it is the nth+1 element of the array myForm.question

    so you could use
    var radioName = 'question[' + index + ']';
    then calling by name
    var radioCollect = document.forms[0].elements[radioName];
    same as :
    var radioCollect = document.forms[0].elements['question['+index+']'];
    or :
    var radioCollect = document.forms[0][radioName];

    document.forms[0].radioName will not work
    because radioName is not a real name
    (it's a variable with a value)

    and in collection 'radioCollect' the loop with 0<i<7 :
    radioCollect
    or
    document.forms[0][radioName]
    or, probably :
    document.forms[0]['question['+index+']']


    DOM way :
    document.getElementsByName(radioName)
    or
    document.getElementsByName('question[' + index + ']')


    Next time prefer names this kind : question_0, ... question_23

    document.forms[0]['question_'+index]

    --
    sm
    SAM, Mar 12, 2008
    #8
  9. In comp.lang.javascript message <e3c591a2-44a1-4097-9312-5976c85f72d7@s1
    9g2000prg.googlegroups.com>, Wed, 12 Mar 2008 04:03:36, Vancouver
    <> posted:

    >I have 24 radio button groups, and 7 options for each group. I wrote
    >code below trying to see if each radio button group is checked. But it
    >does not work. Any help? Thanks.


    I take that to mean 24 sets each of 7-way choices, with no preset
    choice. Call the choices 1 to 7.

    A radiobutton group can be created with no button checked, but once a
    button has been checked there will always be exactly one checked in the
    group.

    An easy solution is to add a new, preselected, invisible Button 0.
    Then, to see if one of buttons 1 - 7 is checked, just test whether
    Button 0 is unchecked.

    --
    (c) John Stockton, nr London UK. ??@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    In MS OE, choose Tools, Options, Send; select Plain Text for News and E-mail.
    Don't quote more than is needed, and respond after each quoted part.
    Dr J R Stockton, Mar 12, 2008
    #9
  10. Henry wrote:
    > [...] In practice you want to use a bracket notation property
    > accessor here, such as:-
    >
    > document.forms[0].elements[("question["+index+"]")].checked
    >
    > See:-
    >
    > <URL: http://www.jibbering.com/faq/faq_notes/square_brackets.html >


    However, there is no need to use parentheses here. As for Pretty Printing,
    they only cause less legibility instead of more. It would therefore be
    better to write:

    document.forms[0].elements["question[" + index + "]"].checked

    or even

    document.forms[0].elements[ "question[" + index + "]" ].checked

    What the spaces can't do, parentheses also cannot, but syntax highlighting
    in editors will.


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
    Thomas 'PointedEars' Lahn, Mar 13, 2008
    #10
  11. Vancouver

    SAM Guest

    Vancouver a écrit :
    >
    > I managed to know why:
    >
    > instead of if (document.forms[0].question[index].checked)
    > I need to a line like this: var name="question["+index+"]["+i+"]";,
    > and then: if (document.form1.name.checked)
    >
    > But why? (Otherwise I get a null object) Why I cannot call
    > document.forms[0].question[index].checked directly?


    Read all the other answers !

    document.forms[0].question[index]
    is an element of the ARRAY :
    document.forms[0].question
    and not an element of the form :
    document.forms[0]

    the right code is (as you've seen with your var name)

    document.forms[0]['question['+index+']']

    document.forms[0]['question['+index+']'].checked


    It is better to do :

    // which collection of radio-buttons ?
    var myRadio = document.forms[0]['question['+index+']'];
    // loop on this collection
    for(var i=0; i<myRadio.length; i++)
    if(myRadio.checked) alert(i+' is checked');

    to avoid to search the right collection on each pass of the loop.


    This bellow works correctly.

    <html>
    <script type="text/javascript">

    function G(){
    for(var index=0; index<2; index++) {
    // which collection of radio-buttons ?
    var myRadio = document.forms[0]['question['+index+']'];
    // loop on this collection
    for(var i=0; i<myRadio.length; i++)
    if(myRadio.checked)
    alert('question '+(+index+1)+': response #'+(+i+1)+' is checked');
    }
    }

    </script>
    <form action="#" onsubmit="return false;">
    <p>Question #1 :
    <input name="question[0]" type=radio>
    <input name="question[0]" type=radio>
    <input name="question[0]" type=radio>
    <input name="question[0]" type=radio checked>
    <p>Question #2 :
    <input name="question[1]" type=radio>
    <input name="question[1]" type=radio checked>
    <input name="question[1]" type=radio>
    <input name="question[1]" type=radio>
    <p>
    <input type=button onclick="G()" value="go on">
    </form>
    </html>


    --
    sm
    SAM, Mar 14, 2008
    #11
  12. Vancouver

    Vancouver Guest

    Many many thanks to all of you. I finally understand this topic.

    Thanks a lot!!!
    Vancouver, Mar 31, 2008
    #12
    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. hy
    Replies:
    0
    Views:
    383
  2. Carlos
    Replies:
    1
    Views:
    866
    Jc Morin
    Feb 24, 2005
  3. Hiten
    Replies:
    1
    Views:
    611
    Vidar Petursson
    May 26, 2004
  4. Diogenes

    check if radio is checked

    Diogenes, Jan 2, 2008, in forum: Javascript
    Replies:
    40
    Views:
    379
  5. GioX®
    Replies:
    4
    Views:
    212
    Thomas 'PointedEars' Lahn
    Feb 4, 2008
Loading...

Share This Page