...

View Full Version : Get radio button value?



Sing
06-20-2010, 02:24 AM
I don't exactly know how to word my issue.

Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from.

My main dilemma is it must do this without them having to submit.

Old Pedant
06-20-2010, 02:47 AM
You should have given us more details.

WHICH buttons in group2 are associated with WHICH selections from group1??????

But something like this:


<code type="text/javascript">
function allow(rb1, list)
{
var rb2 = rb1.form.group2;
for ( var r = 0; r < rb2.length; ++r )
{
rb = rb2[r];
rb.style.display = "none";
var val = parseInt(rb.value);
for ( var i = 0; i < list.length; ++i )
{
if ( val == list[i] ) { rb.style.display = "inline"; break; }
}
}
}
</script>
...
<form>
<input type="radio" name="group1" value="1" onclick="allow(this,[2,4]);"/>
<input type="radio" name="group1" value="2" onclick="allow(this,[1,4]);"/>
<input type="radio" name="group1" value="3" onclick="allow(this,[1,2,3]);"/>
<br/>
<input type="radio" style="display: none;" name="group2" value="1" />
<input type="radio" style="display: none;" name="group2" value="2" />
<input type="radio" style="display: none;" name="group2" value="3" />
<input type="radio" style="display: none;" name="group2" value="4" />
</form>

Utterly UNTESTED code, off top of my head. Show your real examples and I'll maybe try harder.

Old Pedant
06-20-2010, 02:49 AM
Actually, the proble with that code is that it will hide the radio buttons in group2, but any lables associated with each button will remain. So all the more reason to show real code.

Sing
06-20-2010, 03:00 AM
Here's the form part of the code:
<form action="account.php?mode=avatar" method="post"><div id="avatar_section">

<div id="avatar_stack">


<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[skin]" type="radio" value="body1" <? if($prof[skin]==body1) echo("checked='checked'");?><? if($prof[skin]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/skin2.gif" alt="" /><input name="avatar[skin]" type="radio" value="body2" <? if($prof[skin]==body2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/skin3.gif" alt="" /><input name="avatar[skin]" type="radio" value="body3" <? if($prof[skin]==body3) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?><? if($prof[hair]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/hair.gif" alt="" /><input name="avatar[hair]" type="radio" value="hair" <? if($prof[hair]==hair) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/hair2.gif" alt="" /><input name="avatar[hair]" type="radio" value="hair2" <? if($prof[hair]==hair2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/hair4.gif" alt="" /><input name="avatar[hair]" type="radio" value="hair4" <? if($prof[hair]==hair4) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/boyface.gif" alt="" /><input name="avatar[face]" type="radio" value="boyface" <? if($prof[face]==boyface) echo("checked='checked'");?><? if($prof[face]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[handitem]" type="radio" value="arm1" <? if($prof[handitem]==arm1) echo("checked='checked'");?><? if($prof[handitem]==NULL) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/shirt.gif" alt="" /><input name="avatar[shirt]" type="radio" value="shirt" <? if($prof[shirt]==shirt) echo("checked='checked'");?> <? if($prof[shirt]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/shirt2.gif" alt="" /><input name="avatar[shirt]" type="radio" value="shirt2" <? if($prof[shirt]==shirt2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/suit760958.gif" alt="" /><input name="avatar[shirt]" type="radio" value="suit760958" <? if($prof[shirt]==suit760958) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/shirt3.gif" alt="" /><input name="avatar[shirt]" type="radio" value="shirt3" <? if($prof[shirt]==shirt3) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/refshirt.gif" alt="" /><input name="avatar[shirt]" type="radio" value="refshirt" <? if($prof[shirt]==refshirt) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> <? if($prof[hat]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/hat1.gif" alt="" /><input name="avatar[hat]" type="radio" value="hat1" <? if($prof[hat]==hat1) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/fruithat.gif" alt="" /><input name="avatar[hat]" type="radio" value="fruithat" <? if($prof[hat]==fruithat) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/cowboy.gif" alt="" /><input name="avatar[hat]" type="radio" value="cowboy" <? if($prof[hat]==cowboy) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/beanie.gif" alt="" /><input name="avatar[hat]" type="radio" value="beanie" <? if($prof[hat]==beanie) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/cap.gif" alt="" /><input name="avatar[hat]" type="radio" value="cap" <? if($prof[hat]==cap) echo("checked='checked'");?> />

</p>

<p>
<img src="hs/news/Upload/images/skirt2.gif" alt="" /><input name="avatar[pants]" type="radio" value="skirt2" <? if($prof[pants]==skirt2) echo("checked='checked'");?> <? if($prof[pants]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/bottom2.gif" alt="" /><input name="avatar[pants]" type="radio" value="bottom2" <? if($prof[pants]==bottom2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/pants.gif" alt="" /><input name="avatar[pants]" type="radio" value="pants" <? if($prof[pants]==pants) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/pants2.gif" alt="" /><input name="avatar[pants]" type="radio" value="pants2" <? if($prof[pants]==pants2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />

</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked'");?> <? if($prof[shoes]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/shoes2.gif" alt="" /><input name="avatar[shoes]" type="radio" value="shoes2" <? if($prof[shoes]==shoes2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/shoes3.gif" alt="" /><input name="avatar[shoes]" type="radio" value="shoes3" <? if($prof[shoes]==shoes3) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/shoes4.gif" alt="" /><input name="avatar[shoes]" type="radio" value="shoes4" <? if($prof[shoes]==shoes4) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/shoes5.gif" alt="" /><input name="avatar[shoes]" type="radio" value="shoes5" <? if($prof[shoes]==shoes5) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[accessory]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked'");?> <? if($prof[accessory]==NULL) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/mask.gif" alt="" /><input name="avatar[accessory]" type="radio" value="mask" <? if($prof[accessory]==mask) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/catears.gif" alt="" /><input name="avatar[accessory]" type="radio" value="catears" <? if($prof[accessory]==catears) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/glasses.gif" alt="" /><input name="avatar[accessory]" type="radio" value="glasses" <? if($prof[accessory]==glasses) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/belt.gif" alt="" /><input name="avatar[accessory]" type="radio" value="belt" <? if($prof[accessory]==belt) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/headset.gif" alt="" /><input name="avatar[accessory]" type="radio" value="headset" <? if($prof[accessory]==headset) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/headset2.gif" alt="" /><input name="avatar[accessory]" type="radio" value="headset2" <? if($prof[accessory]==headset2) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/bling.gif" alt="" /><input name="avatar[accessory]" type="radio" value="bling" <? if($prof[accessory]==bling) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/eyepatch.gif" alt="" /><input name="avatar[accessory]" type="radio" value="eyepatch" <? if($prof[accessory]==eyepatch) echo("checked='checked'");?> />
<img src="hs/news/Upload/images/whistle.gif" alt="" /><input name="avatar[accessory]" type="radio" value="whistle" <? if($prof[accessory]==whistle) echo("checked='checked'");?> />

</p>

</div>
</div></table></table>
<BR><BR><BR><BR><BR><BR><BR><BR>
<button value="submit" name="submit" class="submitBtn"><span> &nbsp; Save Changes &nbsp; </span></button>

</form>
</p>
</div>

Sing
06-20-2010, 03:00 AM
And here's the Javascript part:


<script type="text/javascript">
var avatar_layers = new Array('skin', 'hair', 'face', 'handitem', 'shirt', 'hat', 'pants', 'shoes', 'accessory')
var layer_colours = new Array('#ffffc3', '#ffffc3', '#ffffc3', '#ffffc3', '#ffffc3', '#ffffc3', '#ffffc3', '#ffffc3')
var inactive_tab_background_colour = '#dddddd'
var inactive_tab_bottom_border_colour = '#888888'
var stack_height = 1
var on_top = 0
var key = null

onload = layout

function layout()
{
if(!document.getElementById('avatar_section')) return
document.onkeydown = keyhit
tabs()
hide_radio_buttons(document.getElementById('avatar_stack'))
StackImageHolders('avatar_stack');
P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
P.style.backgroundColor = layer_colours[on_top]
P.style.zIndex = stack_height++
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<LIs.length; i++)
{
LIs[i].style.backgroundColor = inactive_tab_background_colour
LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour

}
LIs[on_top].style.backgroundColor = layer_colours[on_top]
LIs[on_top].style.borderBottomColor = layer_colours[on_top]
LIs[on_top].focus()
IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
IMGs[i].className = 'black_border'
IMGs[i].style.cursor = 'pointer'
IMGs[i].onclick=function(){ChangeGarment(this)}
}
avatar_preview_and_hotkey_text()
update_avatar(document.getElementById('avatar_stack').firstChild)
/* I added the following two lines because Internet Explorer
wasn't updating the display properly after loading */
document.getElementsByTagName('body')[0].style.width='95';
document.getElementsByTagName('body')[0].style.width='95';
}

function keyhit(e)
{
thisKey = e ? e.which : window.event.keyCode
alt_key_down = e ? e.altKey : window.event.altKey
ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
shift_key_down = e ? e.shiftKey : window.event.shiftKey
switch (thisKey) {
case 37: key = 'LEFT'
break
case 39: key = 'RIGHT'
break
default: key = null
}
if(key && alt_key_down && ctrl_key_down)
{
IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
if(IMGs[i].className == 'red_border')
{
if((key == 'LEFT') && (i > 0))
{
i--
ChangeGarment(IMGs[i])
return
}
if((key == 'RIGHT') && (i < (IMGs.length - 1)))
{
i++
ChangeGarment(IMGs[i])
return
}
}
}
}
else if(key && alt_key_down && shift_key_down)
{
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
if((key == 'LEFT') && (on_top > 0))
{
on_top--
bring_to_the_top(LIs[on_top])
return
}
if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
{
on_top++
bring_to_the_top(LIs[on_top])
return
}
}
}

function tabs()
{
list = document.createElement('ul')
for(i=0; i<avatar_layers.length; i++)
{
list_item = document.createElement('li')
list_item.appendChild(document.createTextNode(avatar_layers[i]))
list_item.onmouseover=function(){this.className='mouse'}
list_item.onmouseout=function(){this.className=''}
list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
list_item.onclick=function(){
bring_to_the_top(this)
}
list_item.onfocus=function(){
bring_to_the_top(this)
}
list.appendChild(list_item)
}
document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}

function hide_radio_buttons(caller)
{
INPUTs = caller.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
INPUTs[i].style.display = 'none';
}
}
}

function StackImageHolders(caller)
{
Ps = document.getElementById(caller).getElementsByTagName('p')
for(i=0; i<Ps.length; i++)
{
Ps[i].className = 'stack'
}
}

function avatar_preview_and_hotkey_text()
{
for(i=0; i<avatar_layers.length; i++)
{
preview = document.createElement('img')
preview.id = avatar_layers[i]
preview.className = 'preview'
preview.width = '95px'
preview.height = '141px'
preview.alt = 'avatar preview image'
document.getElementById('avatar_stack').appendChild(preview)
}

hotkey_text = document.createElement(' ')
hotkey_text.className = 'hotkeys'
hotkey_text.appendChild(document.createTextNode(''))
document.getElementById('avatar_stack').appendChild(hotkey_text)
}

function update_avatar(caller)
{
INPUTs = caller.parentNode.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
if(INPUTs[i].checked)
{
document.getElementById(INPUTs[i].name.match(/^.*\[(.*)\]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
INPUTs[i].previousSibling.className = 'red_border'
}
else
{
INPUTs[i].previousSibling.className = 'black_border'
}
}
}
}

function ChangeGarment(caller)
{
inputs = caller.parentNode.getElementsByTagName('input')
for(i=0;i<inputs.length;i++)
{
inputs[i].checked=false
}
caller.nextSibling.checked=true
update_avatar(caller)
}

function bring_to_the_top(caller)
{
tabs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<tabs.length; i++)
{
tabs[i].style.backgroundColor = inactive_tab_background_colour
tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
on_top = caller.tab_number
caller.style.backgroundColor = layer_colours[caller.tab_number]
caller.style.borderBottomColor = layer_colours[caller.tab_number]
put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
put_on_top.style.zIndex = stack_height++
put_on_top.style.backgroundColor = layer_colours[caller.tab_number]
}
</script>

Sing
06-20-2010, 08:08 PM
You should have given us more details.

WHICH buttons in group2 are associated with WHICH selections from group1??????

But something like this:


<code type="text/javascript">
function allow(rb1, list)
{
var rb2 = rb1.form.group2;
for ( var r = 0; r < rb2.length; ++r )
{
rb = rb2[r];
rb.style.display = "none";
var val = parseInt(rb.value);
for ( var i = 0; i < list.length; ++i )
{
if ( val == list[i] ) { rb.style.display = "inline"; break; }
}
}
}
</script>
...
<form>
<input type="radio" name="group1" value="1" onclick="allow(this,[2,4]);"/>
<input type="radio" name="group1" value="2" onclick="allow(this,[1,4]);"/>
<input type="radio" name="group1" value="3" onclick="allow(this,[1,2,3]);"/>
<br/>
<input type="radio" style="display: none;" name="group2" value="1" />
<input type="radio" style="display: none;" name="group2" value="2" />
<input type="radio" style="display: none;" name="group2" value="3" />
<input type="radio" style="display: none;" name="group2" value="4" />
</form>

Utterly UNTESTED code, off top of my head. Show your real examples and I'll maybe try harder.

That code works great! My only issue is that for it to work with my code, group1 and group2 would need to be like this: group[1] and group[2]


I am completely unable to make the code work with them with my small javascript knowledge



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum