Dynamic Radio Group

[Craig Keightley]

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

 

[Mick White]

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

 

[kaeli]

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

 

[RobB]

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

 

[RobG]

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.

 

[Craig Keightley]

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

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.

 

[Craig Keightley]

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

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

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.