homepage Welcome to WebmasterWorld Guest from 54.204.249.184
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved