...
PDA

triple combo box reload not working

creepin' up
12-24-2004, 10:45 AM
Hi all,

I am using a triple combo box script that I found at javascriptkit.com.
The box works fine, but I can't get it to reload itself or retain the original information that the user entered, when the user clicks the back button.

I found some threads on this forum from designers that was having the same problem. I used the suggestion of a couple of the authors and added the functions that they offered to make the box retain the original selection.

But things ain't right. Even though I added the functions, and the page onload(), and adjusted the function for redirect2(z), it still won't retain the information for boxes 2 and 3. It will retain box 1.

I'm not advanced in javascript. So any help would be a great. I'm not sure I put the new functions in the right place. I'm not getting any errors, but at the same time it isn't doing what it's suppose to do.


Here's the script after I added the functions:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script language="javascript">
function initializeCombo(){
if (window.name!=''){
var arrValues = window.name.split('|');
var frm = document.isc;
setCombo(frm.example, arrValues[0]);
setCombo(frm.stage2, arrValues[1]);
setCombo(frm.stage3, arrValues[2]);
}
}

function setCombo(sel, defValue){
for (var i=0;i<sel.options.length;i++){
if (sel.options[i].text==defValue){
sel.selectedIndex = i;
break;
}
}
}
</script>

</head>

<body onload="initializeCombo()">

<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11"> &nbsp;

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Big Island</option>
<option></option>
</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>

<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ JavaScript Kit (http://www.javascriptkit.com)
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select2---"," ");

group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("Atlantis Submarine","47");
group[1][2]=new Option("","46");
group[1][3]=new Option("","45");

group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("","115");
group[2][2]=new Option("","116");

var temp=document.isc.stage2


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}



var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}

secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Reserve Atlantis","atlantissubmarinedescription.htm");
secondGroup[1][1][2]=new Option("","");
secondGroup[1][1][3]=new Option("","");

secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("","");
secondGroup[1][2][2]=new Option("","");
secondGroup[1][2][3]=new Option("","");

secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("","");
secondGroup[1][3][2]=new Option("","");

secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("","");
secondGroup[2][1][2]=new Option("","");
secondGroup[2][1][3]=new Option("","");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("","");
secondGroup[2][2][2]=new Option("","");

var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
var f = document.isc;
window.name = f.example.options[f.example.selectedIndex].text + "|" + f.stage2.options[f.stage2.selectedIndex].text + "|" + f.stage3.options[f.stage3.selectedIndex].text;
window.location=temp1[z].value
}

//-->
</script>

</td>
</tr>
</table>
</FORM>

<p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p></td>
<td width="34%">&nbsp;</td>
</tr>
</table>
</center>
</div>

</body>

</html>


This is the the function that I added to the script

originally was:
function redirect2(z){
var f = document.isc;
window.location=temp1[z].value

changed to:
function redirect2(z){
var f = document.isc;
window.name = f.example.options[f.example.selectedIndex].text + "|" + f.stage2.options[f.stage2.selectedIndex].text + "|" + f.stage3.options[f.stage3.selectedIndex].text;
window.location=temp1[z].value


added this to the body tag:

<body onload="initializeCombo()">

And put this function in the <head>

<script language="javascript">
function initializeCombo(){
if (window.name!=''){
var arrValues = window.name.split('|');
var frm = document.isc;
setCombo(frm.example, arrValues[0]);
setCombo(frm.stage2, arrValues[1]);
setCombo(frm.stage3, arrValues[2]);
}
}

function setCombo(sel, defValue){
for (var i=0;i<sel.options.length;i++){
if (sel.options[i].text==defValue){
sel.selectedIndex = i;
break;
}
}
}
</script>

Thanks for your help!

Shelly
Willy Duitt
12-27-2004, 03:47 AM
It does exactly what it is suppose to do...
When the document is loaded the options are loaded with their default values whether you go directly to the page or leave and return via the back button.... If you want to preserve the state of the option menus you will need to store and pass those values somehow... I would advise passing the option values on the window.name property rather than cookies....

This has been discussed numerous times in the past and the required modifications have been provided by several members... Try searching the forums both here in Javascript and Dynamic Drive Script Help.....

.....Willy
creepin' up
12-27-2004, 10:44 AM
Hello Willy,

As I said in my original post. I already searched this forum, and I used suggestions from people in this forum. One of those suggestions was yours.

Adding the changes suggested to the script does not retain the users information when they use the back button. The default is set to "Select", not the users choice.

No one is questioning the accuracy of the original script. It's a good script. But, as I said in my first post, the script itself works fine, with the exception of the back button.

However, I have been able to locate a script that opens the users selection in a new window and retains the users choice. I incorporated the two scipts and it works great. A triple combo box that opens in a new window when the 3rd selection box is changed. Close the new window and the the users initial selected option is still as it was.

Thanks for your help.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum