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

Why won't my javascript variable update after selecting a new radio button?

Question:
I have some of code that I am using that combines a couple of pieces of javascript.  

*One is a multi form document that allows the user to enter form data and "page" through while staying on the same webpage.
*The second is a piece of javascript that allows me to replace a radio button with the ability to select an image and have box drawn around it, indicated that it is selected.

Note that I have replaced that lines 57 through 60 have this radio button replacement code. Lines 30-37 have the javascript associated with it.

Note also, that I added this code:
  <SCRIPT LANGUAGE="JavaScript">document.write(document.weboptions.gender.value); </SCRIPT>
on line 67, at the top of "page 2" so that it would print the variable. I intended to use this as a "cart" of sorts, as the user pages though the forms.

Now the issue is as follows:
If I select the "Male" image, and then click "continue", "Male" appears at the top of the second page.
Great!  And if I just click "Continue" through to the end, the popup indicates that the "gender" "Male" was selected.  Cool!

But...if I click "Go Back", through each page, back to "Page 1", and then select the "Female" image, and click "Continue", "Male" still appears at the top of "Page 2". Not Cool. It should list "Female" at the top of "page 2".  Further more, if I click "continue" through to the end, the popup indicates that "gender" "Female" was selected. That's Cool!.

So the problem is with the result printed by "document.write".  This is driving me nuts and I cannot figure out how to make it work.

Please also note that if you begin by selecting "Male" and then, click on "go back" and select "Female", and the "continue", then click the browser "refresh" button, and then select "Female" and "continue", the variable list is "Female" which is correct.

The site is located at http://www.g3crm.com/expert

Prompt help would be appreciated.
<html>
<head>
<title>Multi-Page Form</title>
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
	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>
<!--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>Question 6 <input type="text" id="T6" size="20"></p>
  <p>Question 7 <input type="text" id="T7" size="20"></p>
  <p>Question 8 <input type="text" id="T8" size="20"></p>
  <p>Question 9 <input type="text" id="T9" size="20"></p>
  <p>Question 10 <input type="text" id="T10" size="20"></p>
  <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>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>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
 
LordOfPortsCommented:
The content for div id page2 is generated as soon as the web page loads and since the default value of the hidden input gender is "Male" it will always show independent of the change. In order to correct the behavior you can add this code to the end of the showLayer function:

if(lyr == 'page2') {
    var sGender = document.getElementById('gender').value;
    var spnGender = document.getElementById('spnGender');
    spnGender.innerHTML = sGender;
}

and replace the script statement at the top of the div id page 2 with:

<span id="spnGender"></span>

Below is an updated version of your code that will accomplish the desired behavior:
<html>
<head>
<title>Multi-Page Form</title>
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
	hideLayer(currentLayer);
	document.getElementById(lyr).style.visibility = 'visible';
	currentLayer = lyr;
	
	if(lyr == 'page2') {
	    var sGender = document.getElementById('gender').value;
	    var spnGender = document.getElementById('spnGender');
	    spnGender.innerHTML = sGender;
	}
}
 
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>
<!--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">
  <span id="spnGender"></span>
  <p>Question 6 <input type="text" id="T6" size="20"></p>
  <p>Question 7 <input type="text" id="T7" size="20"></p>
  <p>Question 8 <input type="text" id="T8" size="20"></p>
  <p>Question 9 <input type="text" id="T9" size="20"></p>
  <p>Question 10 <input type="text" id="T10" size="20"></p>
  <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>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>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
 
hieloCommented:
This:
<SCRIPT LANGUAGE="JavaScript">document.write(document.weboptions.gender.value); </SCRIPT>

Is executed while the page is loading. Since gender exists right above that line, the default value for gender is inserted. The code below "carries" the gender from page to page. I believe that's what you are after:
<html>
<head>
<title>Multi-Page Form</title>
<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>
<!--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>
  <p>Question 6 <input type="text" id="T6" size="20"></p>
  <p>Question 7 <input type="text" id="T7" size="20"></p>
  <p>Question 8 <input type="text" id="T8" size="20"></p>
  <p>Question 9 <input type="text" id="T9" size="20"></p>
  <p>Question 10 <input type="text" id="T10" size="20"></p>
  <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
 
chrisj1963Author Commented:
Perfect. Has simple soltion. explained it  and provided the full code.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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