Taking action only when two sets of radio buttons have both beenselected

[Steve Swift]

I'm slowly learning Javascript (I suspect the target is moving away
faster though) but the challenge facing me is beyond my meagre skills.

I have a page with two sets of radio buttons. I'd like to take an action
only when both sets of radio buttons have a selected button.

How should I go about this? My actual page will probably have more than
two sets of radio buttons, but I can probably generalise from the case
of two sets with two buttons each. I can fabricate a test page if that
would help. In fact, I just did: http://swiftys.org.uk/buttons.html

The production page is where lucky people will go to claim prizes that
they have won. Each award has multiple choices of prize. I'll be using
JavaScript to prevent them submitting the form before they've made a
choice of prize in each award that they won. I know that it won't help
the folks with JavaScript disabled (about 0.001% of my target audience
as it is a Corporate requirement) but it will stop the others from
annoying my sever with incomplete requests.

 

[Paul Lautman]

I'm slowly learning Javascript (I suspect the target is moving away
faster though) but the challenge facing me is beyond my meagre skills.

I have a page with two sets of radio buttons. I'd like to take an
action only when both sets of radio buttons have a selected button.

How should I go about this? My actual page will probably have more
than two sets of radio buttons, but I can probably generalise from
the case of two sets with two buttons each. I can fabricate a test
page if that would help. In fact, I just did:
http://swiftys.org.uk/buttons.html
The production page is where lucky people will go to claim prizes that
they have won. Each award has multiple choices of prize. I'll be using
JavaScript to prevent them submitting the form before they've made a
choice of prize in each award that they won. I know that it won't help
the folks with JavaScript disabled (about 0.001% of my target audience
as it is a Corporate requirement) but it will stop the others from
annoying my sever with incomplete requests.

What sort of action do you want to happen when the second radio button has
been selected?

 

[Lasse Reichstein Holst Nielsen]

Hi Steve

I have a page with two sets of radio buttons. I'd like to take an
action only when both sets of radio buttons have a selected button.

So you need to either remember or compute whether each group has
a button selected. I'd go for remembering it whenever a button
is clicked.

How should I go about this? My actual page will probably have more
than two sets of radio buttons, but I can probably generalise from the
case of two sets with two buttons each. I can fabricate a test page if
that would help. In fact, I just did:
http://swiftys.org.uk/buttons.html

The production page is where lucky people will go to claim prizes that
they have won. Each award has multiple choices of prize. I'll be using
JavaScript to prevent them submitting the form before they've made a
choice of prize in each award that they won. I know that it won't help
the folks with JavaScript disabled (about 0.001% of my target audience
as it is a Corporate requirement) but it will stop the others from
annoying my sever with incomplete requests.

So you want to enable the submit button (and stop preventing
submission by other means) when all groups have an option selected.

I'd go for simple logic and memorization.
Remember which groups (by name) have had a button set, as well as
the total number of groups with a button set. Then trigger an effect
when the desired number is reached:

<script type="text/javascript">
var GROUP_COUNT = 2; // number of different groups.
var numGroups = 0; // number of groups with button selected
var setGroups = {}; // names of groups with button selected

var submitAllowed = false; // checked from onsubmit handler

function setGroup(button) {
var name = button.name;
if (setGroups[name] !== true) {
setGroups[name] = true;
numGroups++;
if (numGroups == GROUP_COUNT) {
enableSubmit(button.form);
}
}
}

function clearGroups(form) {
numGroups = 0;
setGroups = {};
disableSubmit(form);
}

function enableSubmit(form) {
submitAllowed = true;
// re-enable submit buttons.
}

function disableSubmit(form) {
submitAllowed = false; // checked in onsubmit
// Disable submit buttons in form too, to be nice.
// They must start disabled for JS-disabled browsers
}
</script>

<form action="..."
onsubmit="if(!submitAllowed) { return false; }; // ..."
onreset="clearGroups(this);">
<input type="radio" name="grp1" onclick="setGroup(this);">
<input type="radio" name="grp1" onclick="setGroup(this);">
<input type="radio" name="grp1" onclick="setGroup(this);">
<input type="radio" name="grp1" onclick="setGroup(this);">
<br>
<input type="radio" name="grp2" onclick="setGroup(this);">
<input type="radio" name="grp2" onclick="setGroup(this);">
<input type="radio" name="grp2" onclick="setGroup(this);">
<input type="radio" name="grp2" onclick="setGroup(this);">
<input type="submit" name="sub" value="Submit!">
<input type="reset" value="Reset!">
</form>

Good luck
/L

 

[Steve Swift]

What sort of action do you want to happen when the second radio button has
been selected?

When both sets of radio buttons have a button checked, I would enable
the "Submit" button. I can probably manage to figure that part out by
myself (but wouldn't ignore gratuitous suggestions).

 

[Steve Swift]

So you need to either remember or compute whether each group has
a button selected. I'd go for remembering it whenever a button
is clicked.

Thanks for a comprehensive answer. I'll take a few weeks to work out
what it does!

 

[Dr J R Stockton]

So you need to either remember or compute whether each group has
a button selected.

Not necessarily.

If each set of radio buttons has an additional default hidden button,
then it is only necessary to test that said button is not selected to
determine that one of the others has been selected.

Alternatively, that default button can be non-hidden but labelled
something like "I'm still thinking about this question"; then if the
user makes a selection and realises that it was too hasty he can un-make
it and be protected against sending the hasty answer.

I don't believe that the E-mail address in the sig of the quoted LRN
article actually works. Amusingly, the Google translation of "oversat
til dansk" appears to be "translated into English".

 

[Steve Swift]

If each set of radio buttons has an additional default hidden button,
then it is only necessary to test that said button is not selected to
determine that one of the others has been selected.

Thank you, that would make my test quite simple. The page itself is
built by a CGI script, so I don't need to know enough Javascript to loop
over all the sets of radio buttons in the page - the CGI script can
generate a longer JavaScript clause when there are more sets.

 

[Steve Swift]

Thank you, that would make my test quite simple.

Indeed, very simple. My test page at http://swiftys.org.uk/buttons.html
is now working. Thank you.

That page is static HTML, but the production page will be generated by a
CGI script which can extend the "if" statements according to the number
of buttons in each group.

I'm actually not expecting there ever to be more than one group, but it
might occur very occasionally.