Click to See Complete Forum and Search --> : Radio buttons + manipulating html


audrey11
01-12-2004, 08:47 AM
I'm trying to write a fairly simple form. It will have three columns with options (as radio buttons) under each column. But when the user selects an option in, say, column 1, then I want to gray out some of the other options under the other columns so that they can only pick certain ones from columns 2 or 3.

So if someone clicks on the 3rd radio button on column one, everything will be grayed out except, say, the 2nd radio button under column two and the 5th radio button under column three.

By "grayed out" I mean, somehow indicate to the user that they can't pick those options (and if they do, a popup box gives error). Graying out could be a font color change (is this possible?)

Can anyone give me a quick example? Or point me to a tutorial of some sort?

Thank you!

Pittimann
01-12-2004, 09:21 AM
Hi!

You don't need to manipulate HTML in a way you described. Radio buttons can have (or dynamically be given) the attribute "disabled". If a radio button is disabled, there will also be no need to have an alert, if it is clicked, because a disabled radio button's status (checked or not) cannot be changed.

If you post your form and specify the dependancies you need, you will surely be given the solution you like...

Cheers - Pit

David Harrison
01-12-2004, 09:44 AM
I wrote a script that should do what you want. It uses onclick event handlers in radio buttons, it works like this:

<input type="radio" name="col1" id="col1rad1" onclick="off('col2rad1,col3rad1');on('col2rad2,col3rad2');">

In the function off() just add the id's of the radio buttons you want to gray out, and in the function on() just add the id's of the radio buttons you want to turn on again. Make sure that all id's you enter are separated by commas.

In the script I haven't put any event handlers in the radio buttons, I left htat up to you. :D

Pittimann
01-12-2004, 09:54 AM
Hi!

Small typo (missing quotes).

<input type="radio" name="col1" id="col1rad1" onclick="off('col2rad1','col3rad1');on('col2rad2','col3rad2');">

Cheers - Pit

David Harrison
01-13-2004, 03:46 AM
Nope, I don't see a typo there. :D

It's meant to be like that, take a look at my script. You should see a .split(",") in there.