chrisj1963
asked on
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.
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER