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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.18695 seconds
  • Memory Usage 2,926KB
  • Queries Executed 15 (?)
More Information
Template Usage (35):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates