Dynamic Radio Group

Discussion in 'Javascript' started by Craig Keightley, Mar 18, 2005.

  1. I have a page that has n number of radio groups (yes/No)

    how can i prevent the form being submitted if more than one radio group is
    not selected?

    By default all radio groups are unchecked

    The problem i am facing is that i do not know how many yes/no radio groups
    will be generated


    Many Thanks

    Craig
     
    Craig Keightley, Mar 18, 2005
    #1
    1. Advertising

  2. Craig Keightley

    Mick White Guest

    Craig Keightley wrote:
    > I have a page that has n number of radio groups (yes/No)
    >
    > how can i prevent the form being submitted if more than one radio group is
    > not selected?
    >
    > By default all radio groups are unchecked
    >
    > The problem i am facing is that i do not know how many yes/no radio groups
    > will be generated


    function areAllRadiosChecked(form){
    var f=form.length,counter=0,c=0;
    while(f--){
    if(form[f].type=="radio" && (form[f].name !=form[f+1].name)){c++;}
    if(form[f].type=="radio" && form[f].checked){counter++;}
    }
    return c==counter;
    }

    Mick
     
    Mick White, Mar 18, 2005
    #2
    1. Advertising

  3. Craig Keightley

    kaeli Guest

    In article <423acc8e$0$2766$>,
    enlightened us with...
    >
    > The problem i am facing is that i do not know how many yes/no radio groups
    > will be generated
    >


    Your validation function has to loop through all the form elements, then, and
    check them against type==radio. This assumes all radio elements are part of
    this check.
    Note that document.forms is an array that has a property called elements that
    is an array.
    document.forms['formname'].elements[]
    or
    document.forms[index].elements[]
    or
    document.formname.elements[] (shortcut syntax may not work in all browsers)
    (you get the idea)

    There are a couple other ways to do this that are not as cross-browser (i.e.
    require newer DOM methods such as getElementsByTagname, getElementsByName, or
    getElementById). If you only need to support newer browsers, you can do
    something like name them all consistently (i.e. all named optiongroupname_x
    where x is an integer), write the final value of x to a javascript variable,
    and do a looped getElementsByName("optiongroupname"+x).

    The first is simpler. If you have a LOT of form elements that are NOT part of
    the option groups you're interested in, though, the second can save you
    processing time by resulting in a smaller loop. Since JS runs on the client,
    the time it takes to do things is highly dependent on the user's machine.
    Sometimes it's worth it to try to optimize things that loop.

    --
    --
    ~kaeli~
    Frisbeetarianism (n.), The belief that, when you die, your
    soul goes up on the roof and gets stuck there.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Mar 18, 2005
    #3
  4. Craig Keightley

    RobB Guest

    Craig Keightley wrote:
    > I have a page that has n number of radio groups (yes/No)
    >
    > how can i prevent the form being submitted if more than one radio

    group is
    > not selected?
    >
    > By default all radio groups are unchecked
    >
    > The problem i am facing is that i do not know how many yes/no radio

    groups
    > will be generated
    >
    >
    > Many Thanks
    >
    > Craig


    >From the HTML 4.0 spec:


    At all times, exactly one of the radio buttons in a set is checked. If
    none of the <INPUT> elements of a set of radio buttons specifies
    `CHECKED', then the user agent must check the first radio button of the
    set initially.
    Since user agent behavior differs, authors should ensure that in each
    set of radio buttons that one is initially "on".

    >From Jakob Nielsen:


    Always offer a default selection for radio button lists. By definition,
    radio buttons always have exactly one option selected, and you
    therefore shouldn't display them without a default selection.
    (Checkboxes, in contrast, often default to having none of the options
    selected.)
     
    RobB, Mar 18, 2005
    #4
  5. Craig Keightley

    RobG Guest

    RobB wrote:
    > Craig Keightley wrote:
    >
    >>I have a page that has n number of radio groups (yes/No)

    [...]
    >
    >
    >>From the HTML 4.0 spec:

    >
    > At all times, exactly one of the radio buttons in a set is checked. If
    > none of the <INPUT> elements of a set of radio buttons specifies
    > `CHECKED', then the user agent must check the first radio button of the
    > set initially.
    > Since user agent behavior differs, authors should ensure that in each
    > set of radio buttons that one is initially "on".
    >
    >>From Jakob Nielsen:

    >
    > Always offer a default selection for radio button lists. By definition,
    > radio buttons always have exactly one option selected, and you
    > therefore shouldn't display them without a default selection.
    > (Checkboxes, in contrast, often default to having none of the options
    > selected.)
    >


    To which could be added that if there is a simple yes/no choice, then
    a checkbox is the answer. It requires only one control, not two, and
    requires no JavaScript or additional code to ensure exactly two states.

    Most user agents do not enforce the standard so it is common to
    have yes/no radio buttons with neither selected, which suggests that
    there are really three states - yes, no and 'no answer', which infers
    three radio buttons where 'no answer' is checked by default.

    --
    Rob
     
    RobG, Mar 19, 2005
    #5
  6. Thanks for all the feedback and apologies for the late reply

    Just to update:
    The feedback form has to be radio buttons and do are not checked by default
    (customer's spec not mine)

    The system will only be viewed internally on a network using Internet
    explorer

    The radio buttons have subsequent javascript onClick events when selected
    (innerHTML shows/hides part of the page)

    I am going to try the code submitted by Mick and post an update:

    function areAllRadiosChecked(form){
    var f=form.length,counter=0,c=0;
    while(f--){
    if(form[f].type=="radio" && (form[f].name !=form[f+1].name)){c++;}
    if(form[f].type=="radio" && form[f].checked){counter++;}
    }
    return c==counter;
    }


    Craig


    "RobG" <> wrote in message
    news:423b85ef$0$10783$...
    > RobB wrote:
    >> Craig Keightley wrote:
    >>
    >>>I have a page that has n number of radio groups (yes/No)

    > [...]
    >>
    >>
    >>>From the HTML 4.0 spec:

    >>
    >> At all times, exactly one of the radio buttons in a set is checked. If
    >> none of the <INPUT> elements of a set of radio buttons specifies
    >> `CHECKED', then the user agent must check the first radio button of the
    >> set initially.
    >> Since user agent behavior differs, authors should ensure that in each
    >> set of radio buttons that one is initially "on".
    >>
    >>>From Jakob Nielsen:

    >>
    >> Always offer a default selection for radio button lists. By definition,
    >> radio buttons always have exactly one option selected, and you
    >> therefore shouldn't display them without a default selection.
    >> (Checkboxes, in contrast, often default to having none of the options
    >> selected.)
    >>

    >
    > To which could be added that if there is a simple yes/no choice, then
    > a checkbox is the answer. It requires only one control, not two, and
    > requires no JavaScript or additional code to ensure exactly two states.
    >
    > Most user agents do not enforce the standard so it is common to
    > have yes/no radio buttons with neither selected, which suggests that
    > there are really three states - yes, no and 'no answer', which infers
    > three radio buttons where 'no answer' is checked by default.
    >
    > --
    > Rob
     
    Craig Keightley, Apr 13, 2005
    #6
  7. Also forgot to mention that the radio groups are also dynamically named
    eg:

    <input name="auth3" type="radio" value="Y"
    onClick="clearReason('reason3','reasonCell3')">
    No
    <input name="auth3" type="radio" value="N"
    onClick="showReason('reason3','reasonCell3')">


    <input name="auth4" type="radio" value="Y"
    onClick="clearReason('reason4','reasonCell4')">
    No
    <input name="auth4" type="radio" value="N"
    onClick="showReason('reason4','reasonCell4')">


    <input name="auth5" type="radio" value="Y"
    onClick="clearReason('reason5','reasonCell5')">
    No
    <input name="auth5" type="radio" value="N"
    onClick="showReason('reason5','reasonCell5')">

    .....etc


    all i need to check that if all radio buttons are set to N, then set the
    value of a hidden field (completeAuth) to N


    Craig

    "Craig Keightley" <> wrote in message
    news:425d1dde$0$304$...
    > Thanks for all the feedback and apologies for the late reply
    >
    > Just to update:
    > The feedback form has to be radio buttons and do are not checked by
    > default (customer's spec not mine)
    >
    > The system will only be viewed internally on a network using Internet
    > explorer
    >
    > The radio buttons have subsequent javascript onClick events when selected
    > (innerHTML shows/hides part of the page)
    >
    > I am going to try the code submitted by Mick and post an update:
    >
    > function areAllRadiosChecked(form){
    > var f=form.length,counter=0,c=0;
    > while(f--){
    > if(form[f].type=="radio" && (form[f].name !=form[f+1].name)){c++;}
    > if(form[f].type=="radio" && form[f].checked){counter++;}
    > }
    > return c==counter;
    > }
    >
    >
    > Craig
    >
    >
    > "RobG" <> wrote in message
    > news:423b85ef$0$10783$...
    >> RobB wrote:
    >>> Craig Keightley wrote:
    >>>
    >>>>I have a page that has n number of radio groups (yes/No)

    >> [...]
    >>>
    >>>
    >>>>From the HTML 4.0 spec:
    >>>
    >>> At all times, exactly one of the radio buttons in a set is checked. If
    >>> none of the <INPUT> elements of a set of radio buttons specifies
    >>> `CHECKED', then the user agent must check the first radio button of the
    >>> set initially.
    >>> Since user agent behavior differs, authors should ensure that in each
    >>> set of radio buttons that one is initially "on".
    >>>
    >>>>From Jakob Nielsen:
    >>>
    >>> Always offer a default selection for radio button lists. By definition,
    >>> radio buttons always have exactly one option selected, and you
    >>> therefore shouldn't display them without a default selection.
    >>> (Checkboxes, in contrast, often default to having none of the options
    >>> selected.)
    >>>

    >>
    >> To which could be added that if there is a simple yes/no choice, then
    >> a checkbox is the answer. It requires only one control, not two, and
    >> requires no JavaScript or additional code to ensure exactly two states.
    >>
    >> Most user agents do not enforce the standard so it is common to
    >> have yes/no radio buttons with neither selected, which suggests that
    >> there are really three states - yes, no and 'no answer', which infers
    >> three radio buttons where 'no answer' is checked by default.
    >>
    >> --
    >> Rob

    >
    >
     
    Craig Keightley, Apr 13, 2005
    #7
    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. Bisser Milanov
    Replies:
    2
    Views:
    531
    Bisser Milanov
    Jun 26, 2003
  2. Ken Saganowski

    Radio Button Group

    Ken Saganowski, Jan 23, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    606
    Alvin Bruney [MVP]
    Jan 25, 2004
  3. Scott D Johnson
    Replies:
    1
    Views:
    1,075
    Scott D Johnson
    Sep 27, 2006
  4. Jan C. Faerber
    Replies:
    0
    Views:
    623
    Jan C. Faerber
    Jun 30, 2009
  5. Hiten
    Replies:
    1
    Views:
    626
    Vidar Petursson
    May 26, 2004
Loading...

Share This Page