• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 596
  • Last Modified:

Javascript - Display selected variables - like a "shopping cart"

Yesterday an expert answered my question about cart functionality.  The answer included the code needed to display the "gender" on the 2nd page and to carry the display  through each of the following pages. this answer included adding the code in line #10 and adding the  <p id="page(1,2,3 etc.)_gender"></p> code after each page div id.
Question: How do I do the same for additional variables?
*For example: The "Page 2" code beginning at line #82 used the "selectmodel" variable. If I want to have that display in the "cart" at the top of page 3, below the result of the selected "gender" variable. How would I accomplish that?

To see the code running go here:  http://www.g3crm.com/expert/index2_question.htm


<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

0
chrisj1963
Asked:
chrisj1963
1 Solution
 
thirdCommented:
try this,

<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';
var selectedModel = '';
 
function showLayer(lyr){
        if(lyr!='page1')
                document.getElementById(lyr+"_gender").innerHTML = document.weboptions.gender.value;
		if(lyr!='page1' && lyr!='page2')
                document.getElementById(lyr+"_model").innerHTML = selectedModel;
        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);
}
 
function setSelectedModel(obj){
  selectedModel = obj.value;
}
</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"  onclick="setSelectedModel(this);" />
                <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" onclick="setSelectedModel(this);" />                  
                <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 id="page3_model"></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 id="page4_model"></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

0
 
chrisj1963Author Commented:
Absolutely Perfect!  Thank you very much!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now