Select Image instead of radio button - Javascript

Please note that the code on page 1 some javascript that replaces the function of a radio button.  
The code that drives this is line #46-53 and some of the code surrounding the form elements on lines #74-76.  
Question: How can I efficiently use that same select feature for additional variables.  For example, for the code listed under "page 2", lines #82-111.  How would the existing code change to accommodate this? Please use the variable referenced in the Page 2 section to demonstrate how I can add variables to the base version that I have on page 1.

To see the code running go here:

Thanks very much.

<title>Multi-Page Form</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style   .css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
                document.getElementById(lyr+"_gender").innerHTML = document.weboptions.gender.value;
        document.getElementById(lyr).style.visibility = 'visible';
        currentLayer = lyr;
function hideLayer(lyr){
        document.getElementById(lyr).style.visibility = 'hidden';
function showValues(form){
        var values = '';
        var len = form.length - 1; //Leave off Submit Button
        for(i=0; i<len; i++){
                if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)//Skip Continue and Back Buttons
                values += form[i].id;
                values += ': ';
                values += form[i].value;
                values += '\n';
<!--form dependency manager -->
<script src="js/FormManager.js">
<script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
<!--end form dependency manager -->
<!--Begin code to replace radio button with image select with box -->
   <script type="text/javascript">
function selectcolor(text) {
  document.getElementById("gender" + document.getElementById("gender").value).style.border = "2px solid white";
  document.getElementById("gender" + text).style.border = "5px dotted #ffcc00";
  document.getElementById("gender").value = text;
<!--End code to replace radio button with image select with box -->
        font: 10pt sans-serif;
        position: absolute;
        top: 10;
        left: 100;
        visibility: hidden;
<!-- Begin Page 1-->
<form id="multiForm" name="weboptions" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<div id="page1" class="page" style="visibility:visible;">
   <label> <img src="images/Model_Male_index.gif" id="genderMale" style="border: 2px solid white;" onClick="selectcolor('Male')" /></label>
   <label><img src="images/Model_Female_index.gif" id="genderFemale" style="border: 2px solid white;" onClick="selectcolor('Female')" /></label>
          <input type="hidden" id="gender" name="gender" value="Male" />
   <p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
<!-- End Page 1-->
<!-- Begin Page 2-->
<div id="page2" class="page">
<!--   <SCRIPT LANGUAGE="JavaScript">document.write(document.weboptions.gender.value); </SCRIPT> -->
  <p id="page2_gender"></p>
  <table class="center"><tbody><tr><td><table class="center">
        <tr> </tr>
          <td><label>Chris<input type="hidden" class="DEPENDS ON gender BEING Male"></label></td>
          <td><label><img src="images/spacer.gif" width="10" height="1" /><input type="hidden" class="DEPENDS ON gender BEING Male"></label></td>
                  <td><label>Other<input type="hidden" class="DEPENDS ON gender BEING Male"></label></td>
                <td><label><input type="radio" name="selectmodel" value="Chris" class="DEPENDS ON gender BEING Male"  />
                <br />
                <img src="images/chris.gif" alt="Model - Chris" width="100" height="154" /></label></td>
                <td><label><input type="radio" name="selectmodel" value="Other" class="DEPENDS ON gender BEING Male"/>                  
                <br />
                <img src="images/other.gif" alt="Model - Other" width="100" height="154" /></label></td>
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
<!-- End Page 2-->
<!-- Begin Page 3-->
<div id="page3" class="page">
  <p id="page3_gender"></p>
  <p>Question 11 <input type="text" id="T11" size="20"></p>
  <p>Question 12 <input type="text" id="T12" size="20"></p>
  <p>Question 13 <input type="text" id="T13" size="20"></p>
  <p>Question 14 <input type="text" id="T14" size="20"></p>
  <p>Question 15 <input type="text" id="T15" size="20"></p>
  <p><input type="button" id="B2" value="Go Back" onClick="showLayer('page2')"><input type="button" id="C3" value="Continue" onClick="showLayer('page4')"></p>
<!-- End Page 3-->
<!-- Begin Page 4-->
<div id="page4" class="page">
  <p id="page4_gender"></p>
  <p>Question 16 <input type="text" id="T16" size="20"></p>
  <p>Question 17 <input type="text" id="T17" size="20"></p>
  <p>Question 18 <input type="text" id="T18" size="20"></p>
  <p>Question 19 <input type="text" id="T19" size="20"></p>
  <p>Question 20 <input type="text" id="T20" size="20"></p>
  <p><input type="button" id="B3" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit" id="submit"></p>
<!-- End Page 4-->

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


All you need to do is add a parameterto your function.  Your function at line #47 would become something like the attached code and you would pass the name of the element you want to change in the 'elem' parameter such as "gender"

function selectcolor(elem, text) {
  document.getElementById(elem + document.getElementById(elem).value).style.border = "2px solid white";
  document.getElementById(elem + text).style.border = "5px dotted #ffcc00";
  document.getElementById(elem).value = text;

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chrisj1963Author Commented:
Worked Great! Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.