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

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


    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:

    This is the sample layout I would like but does not work:

    Any help very appreciated!!!

  2. #2
    Join Date
    Apr 2003
    Just pass the value to the function changeAvatar(this.value)
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jun 2004
    Portsmouth UK

    <!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">
    <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" />
    #headerContainerImage {
    	background-image: url(http://fuzzbert.org/images/themes/img_banner_generic.png);
    <script language="JavaScript" type="text/javascript">
    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){
       if (ips[zxc0]==cb){
    <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 id="navMainBg">
    <!-- End container for header elements -->
    <!-- //////////////////////container Second Tier///////////////////////////// -->
    <div id="secondTierContainer">
    <!--start pageHeader -->
    <div id="pageHeader">
    <!-- 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 -->
    <br />
    <br />
    <!--<li> <a href="" >Change Avatar</a></li>
    <select id='avatarDropList' onchange="changeAvatar();">
    <!-- end left column content -->
    <!-- end left column containter -->
    <div id="pageHeaderRightColumn"></div>
    <!-- end PageHeader -->
    <h2>Choose your avatar wisely...</h2>
    	<form name="form1">
    	<div class="avatarColumn">
     <!-- will be an ajax pop up of description -->
    		src="http://fuzzbert.org/../images/themes/img_porthole_arch_f1.png" /> <br />
    		<input type="radio" name="avatar" 	value="One.gif" onClick="changeAvatar(this)" /> <br />
    		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 class="avatarColumn">
    		src="http://fuzzbert.org/../images/themes/img_porthole_chronox_f1.png" /> <br />
    		<input type="radio" name="avatar" 	value="Three.gif" onClick="changeAvatar(this)"
         <br />
    		src="http://fuzzbert.org/../images/themes/img_porthole_chronox_m1.png" />
    <br /><input type="radio" name="avatar" 	value="Four.gif" onClick="changeAvatar(this)"
    	 /> <br />
    <input type="button" value="Submit" onClick="changeAvatar()">
    	<div style="clear: both"></div>
    	<!-- end fullwidthdiv --></div>
    <!-- /////////////////////////////End global Contaner/////////////////////////////// -->

    God loves you and will never love you less.

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

  4. #4
    Join Date
    Dec 2008

    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