Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post

    Get radio button value?

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    You should have given us more details.

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

    But something like this:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post
    Here's the form part of the code:
    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>

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post
    And here's the Javascript part:

    Code:
    <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>

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    You should have given us more details.

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

    But something like this:
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •