| Interconnecting Multiple Sets of RadioButtons
3 groups, each group with 4 boxes. |
Willis
msg:1479164 | 6:48 am on Dec 16, 2004 (gmt 0) |
Hey, I have a form submit page that, there are 3 groups of boxes, names are "Top" "Bottem" and "Void". For each set there are the buttons: "Unset" (default), "Red", "Green", "Blue". I need it to be where, if Top == Red, Bottem!= Red, and Void!= Red. If Bottem does == Red however, Bottem becomes "Unset". Fundemental 2 rules are:
A) All 3 can be Unset, but no 2 can be Red Green or Blue at the same time.
B) In the event a selection coflicts with Rule A, upon click, the old selection becomes assigned to "Unset". Feedback? BTW Here is the html part of it: <html>
<head>
<title>Untitled Document</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<form name="check">
<table width="400" height = 150 border="0" cellspacing="0" cellpadding="0">
<tr valign="middle" align="center">
<td height="10" colspan="2">
<div align="center"><u><b>TOP</b></u></div>
</td>
<td height="10" colspan="2">
<div align="center"><u><b>BOTTEM</b></u></div>
</td>
<td height="10" colspan="2">
<div align="center"><u><b>VOID</b></u></div>
</td>
</tr>
<tr valign="bottom" align="center">
<td width="30" align="left">
<input type="radio" name="TOP" value="Unset" checked>
</td>
<td align="left">Unset</td>
<td width="30" align="left">
<input type="radio" name="BOTTEM" value="Unset" checked>
</td>
<td align="left">Unset</td>
<td width="30" align="left">
<input type="radio" name="VOID" value="Unset" checked>
</td>
<td align="left">Unset</td>
</tr>
<tr valign="bottom" align="center">
<td width="30" align="left">
<input type="radio" name="TOP" value="Red" >
</td>
<td align="left"> Red </td>
<td width="30" align="left">
<input type="radio" name="BOTTEM" value="Red" >
</td>
<td align="left"> Red </td>
<td width="30" align="left">
<input type="radio" name="VOID" value="Red" >
</td>
<td align="left"> Red </td>
</tr>
<tr valign="bottom" align="center">
<td width="30" align="left">
<input type="radio" name="TOP" value="Green" >
</td>
<td align="left">Geen</td>
<td width="30" align="left">
<input type="radio" name="BOTTEM" value="Green" >
</td>
<td align="left">Geen</td>
<td width="30" align="left">
<input type="radio" name="VOID" value="Green" >
</td>
<td align="left">Geen</td>
</tr>
<tr valign="bottom" align="center">
<td width="30" align="left">
<input type="radio" name="TOP" value="Blue" >
</td>
<td align="left"> Blue </td>
<td width="30" align="left">
<input type="radio" name="BOTTEM" value="Blue" >
</td>
<td align="left"> Blue </td>
<td width="30" align="left">
<input type="radio" name="VOID" value="Blue" >
</td>
<td align="left"> Blue </td>
</tr>
</table>
</form>
</body>
</html>
|
Bernard Marx
msg:1479165 | 7:06 pm on Dec 16, 2004 (gmt 0) |
To do this, I changed all input names & values to lower case. Not really necessary, but I felt more comfortable with it. You'll need to change the names & values in the HTML. I changed BOTTEM to BOTTOM too. Giving an element the name, 'void' is asking for trouble, as it's a reserved word. I didn't change this, just worked around it. [pre]
// map: holds ref to current input for each colour.
currentInputs = {red:null, blue:null, green:null};
/* map: inputs with value, 'unset'. */
unsetInputs = {};/* Initialise:
* Selections may be different if the
* page has been refreshed.
*/
onload = function()
{
var names = {top:1, bottom:1, 'void':1};
var inputs = document.getElementsByTagName('input');
var input, value, name, k=-1;
/* loop all inputs on page. */
while(input=inputs[++k])
{
name = input.name;
value = input.value;
if(value == "unset")
unsetInputs[name] = input;
else
{
input.onclick = newChoice;
/* get any colour selections */
if( input.checked )
currentInputs[value] = input;
}
}
} function newChoice()
{
var colour = this.value;
var prev = currentInputs[colour];
if(prev)
{
prev.checked = false;
unsetInputs[prev.name].checked = true;
}
this.checked = true;
currentInputs[colour] = this;
}
[/pre]
|
|
|
