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:  http://www.g3crm.com/expert/index2_question.htm

Thanks very much.



<html>
<head>
<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){
        if(lyr!='page1')
                document.getElementById(lyr+"_gender").innerHTML = document.weboptions.gender.value;
        hideLayer(currentLayer);
        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
                        continue;
                values += form[i].id;
                values += ': ';
                values += form[i].value;
                values += '\n';
        }
        alert(values);
}
</script>
 
<!--form dependency manager http://www.dynamicdrive.com/dynamicindex16/formdependency.htm -->
<script src="js/FormManager.js">
</script>
 
<script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>
<!--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;
 
}
    </script>
<!--End code to replace radio button with image select with box -->
 
 
<style>
body{
        font: 10pt sans-serif;
}
.page{
        position: absolute;
        top: 10;
        left: 100;
        visibility: hidden;
}
</style>
</head>
 
<body>
<!-- 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>
</div>
<!-- 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">
      <tbody>
        <tr> </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>
        </tr>
        <tr>
                <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></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>
        </tr>
        <tr>
        </tr>
      </tbody>
    </table></td>
        </tbody>
  </table>
 
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- End Page 4-->
 
</form>
 
</body>
 
</html>

Open in new window

chrisj1963Asked:
Who is Participating?
 
LordWolfyConnect With a Mentor Commented:

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

0
 
chrisj1963Author Commented:
Worked Great! Thank you!
0
All Courses

From novice to tech pro — start learning today.