www.webdeveloper.com
Results 1 to 6 of 6

Thread: Get radio button value?

  1. #1
    Join Date
    Apr 2010
    Posts
    62

    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. #2
    Join Date
    Mar 2010
    Posts
    2,803
    can you post the code you have so far?

  3. #3
    Join Date
    Apr 2010
    Posts
    62
    Quote Originally Posted by tirna View Post
    can you post the code you have so far?
    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>
    that's one of bokehman's scripts - I'm trying to improve it for myself, but after wasting a good 4 hours on this last part googling and trying to figure it out, I decided to ask for help

  4. #4
    Join Date
    Apr 2010
    Posts
    62
    And here's the javascript part of it (it was too long)

    HTML 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>

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    I can't find the word "group" anywhere in your code so I'm wondering how you expect anyone to work out exactly which is group 1 and which is group 2 and what options you want in group 2 if the user selects option 1 in group 1 etc.

    Hopefully someone else will come along to sort this out for you.
    Last edited by tirna; 06-19-2010 at 08:18 PM.

  6. #6
    Join Date
    Apr 2010
    Posts
    62
    Quote Originally Posted by tirna View Post
    I can't find the word "group" anywhere in your code so I'm wondering how you expect anyone to work out exactly which is group 1 and which is group 2 and what options you want in group 2 if the user selects option 1 in group 1 etc.

    Hopefully someelse will come along to sort this out for you.
    I apologize - Each <p> contains a different group. My main post was an example to simple it down a bit

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles