www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to switch from drop down list to radio buttons onchange that recognizes variable

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    11

    Question How to switch from drop down list to radio buttons onchange that recognizes variable

    HI,

    I have working code a friend help me with that creates an array and builds a select option (drop down list). Based on the option chosen in the drop list three images change. This basically picking a theme for you page:
    An Avatar, header image and background image.

    The option select works but I want change the drop list to radio buttons.
    I am stuck on how set up the "value" in the radio buttons to the array of images that need to be changed based on the button selected.

    The javascript is using the prototype framework.

    Here are links to sample pages:
    Working dropdown list:
    http://fuzzbert.org/change_test.html


    This is the sample layout I would like but does not work:
    http://fuzzbert.org/change_test_radio.html

    Any help very appreciated!!!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Just pass the value to the function changeAvatar(this.value)

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    consider

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>change _test</title>
    <link rel="stylesheet" href="http://fuzzbert.org/styles/style.css" type="text/css" media="screen" />
    
    
    
    
    <style>
    #headerContainerImage {
    	background-image: url(http://fuzzbert.org/images/themes/img_banner_generic.png);
    }
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function changeAvatar(cb){
     var frm=cb.form;
     var imgs=frm.getElementsByTagName('IMG');
     var ips=frm.getElementsByTagName('INPUT');
     for (var cnt=0,zxc0=0;zxc0<ips.length;zxc0++){
      if (ips[zxc0].type=='radio'){
       if (!ips[zxc0].save){
        ips[zxc0].save=[imgs[cnt],imgs[cnt].src];
       }
       ips[zxc0].save[0].src=ips[zxc0].save[1];
       if (ips[zxc0]==cb){
        imgs[zxc0].src='http://www.vicsjavascripts.org.uk/StdImages/'+cb.value;
       }
       cnt++;
      }
     }
    }
    /*]]>*/
    </script>
    </head>
    
    <body >
    
    <div id="globalContainer">
    
    <div id="headerContainer">
    <!-- background image -->
    <div id="headerContainerImage">
    
    
    <!-- update jsp -->
    <div id="avatar" style="position:relative; top:0; left:0;"><img src="http://fuzzbert.org/images/header_chronox_f_1.png" id="avatarImg"/></div>
    
    
    <!-- end background image -->
    </div>
    <div id="navMainBg">
    
    </div>
    
    <!-- End container for header elements -->
    </div>
    
    <!-- //////////////////////container Second Tier///////////////////////////// -->
    <div id="secondTierContainer">
    
    
    <!--start pageHeader -->
    
    <div id="pageHeader">
    <h1></h1>
    <!-- jsp call updated from database -->
    <img src="http://fuzzbert.org/images/themes/img_porthole_chronox_f1.png" border="0" id="portholeAvatar" />
    <br clear="all" />
    <!-- Div defines left column containing avatar porthole -->
    <div id="pageHeaderLeftColumn">
    
    <!-- div styles the position and text of the left column content -->
    <div>
    <ul>
    <br />
    <br />
    <!--<li> <a href="" >Change Avatar</a></li>
    <select id='avatarDropList' onchange="changeAvatar();">
    </select>-->
    </ul>
    <!-- end left column content -->
    </div>
    
    <!-- end left column containter -->
    </div>
    
    
    
    <div id="pageHeaderRightColumn"></div>
    <!-- end PageHeader -->
    </div>
    <h2>Choose your avatar wisely...</h2>
    
    
    
    
    	<form name="form1">
    	<div class="avatarColumn">
    
     <!-- will be an ajax pop up of description -->
    
    	<img
    		src="http://fuzzbert.org/../images/themes/img_porthole_arch_f1.png" /> <br />
    		<input type="radio" name="avatar" 	value="One.gif" onClick="changeAvatar(this)" /> <br />
    	<img
    		src="http://fuzzbert.org/../images/themes/img_porthole_arch_m1.png" /><br />
    		 <input type="radio" name="avatar" 	value="Two.gif" onClick="changeAvatar(this)"
    	 />  <br />
    	</div>
    
    
    <div class="avatarColumn">
    
    
    
    	<img
    		src="http://fuzzbert.org/../images/themes/img_porthole_chronox_f1.png" /> <br />
    
    		<input type="radio" name="avatar" 	value="Three.gif" onClick="changeAvatar(this)"
    	 />
         <br />
    	<img
    		src="http://fuzzbert.org/../images/themes/img_porthole_chronox_m1.png" />
    <br /><input type="radio" name="avatar" 	value="Four.gif" onClick="changeAvatar(this)"
    	 /> <br />
    	</div>
    
    
    <input type="button" value="Submit" onClick="changeAvatar()">
    	</form>
    
    	<div style="clear: both"></div>
    
    
    
    	<!-- end fullwidthdiv --></div>
    
    </div>
    
    
    <!-- /////////////////////////////End global Contaner/////////////////////////////// -->
    </div>
    
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Dec 2008
    Posts
    11

    Smile Thank you!!!

    HI Fang and Phillps,

    Thank you so much for your prompt response. I will test it out this afternoon. and see if works.

    Much appreciated!

    Very Grateful - Techie

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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