More than one 'on-change' event on single page

[mikedean]

Rather than dump a load of code here, Ive put the offending page online at http://www.adlincs-devzone.org.uk/clspbeta/scriptproblem.html .
It uses a Double Drop Down box script quite nicely, but this page requires *another* implementation of the script as well, and this is where it goes wrong. Actually the *treble* box still seems to work, but the double one at the top doesnt.
I read through the "adding more than one script to a page" tutorial, but that talks about BODY ONLOAD and WINDOW ONLOAD events, of which (I dont think) I have neither. In my case they are ON*CHANGE* events.
Can someone please tell me how to make this combination work correctly?
Many thanks in advance
Mike

[beetle]

Well, you are including the entire script twice, so all the global variable are being duplicated, which is why the onChange event on the first SELECT triggers changes within the 2nd set, because those script definitions came later in source order and have precedence.

Short of re-writing the script to handle this better, you should change all the global variable in the 2nd instance to something else. Perhaps append a '2' or something to them so that this will work. Not a great solution, but one that will work within minimal time investment.

In short, this has nothing to do with the onChange events.

[ShriekForth]

What appears to be the problem is that the second script is really an extention of the first. It has a duplicate array name (group) and a duplicate function name (redirect), as well as 2 fields named the same (example). The last is OK, since they are in seperate forms, but the other two are probably what is causing your headache...

So what I would do is rename them. group becomes groupTop

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

groupTop[0][0]=new Option("-----------------","")

groupTop[1][0]=new Option("Click Go","aboutus.shtml")

groupTop[2][0]=new Option("Select Area","")
groupTop[2][1]=new Option("Derby","/clspbeta/eastmidlands/derby")
groupTop[2][2]=new Option("Derbyshire","/clspbeta/eastmidlands/derbyshire")
You get the idea. Then that reference as well as the "temp" reference will need to be changed. "temp" is the reason it fill in the second box on the bottom.


var tempTop=document.selectionbox.stage2

function redirectTop(x){
for (m=tempTop.options.length-1;m>0;m--)
tempTop.options[m]=null

for (i=0;i<groupTop[x].length;i++){
tempTop.options[i]=new Option(groupTop[x][i].text,groupTop[x][i].value)
}
tempTop.options[0].selected=true
}

function go1(){
location=tempTop.options[tempTop.selectedIndex].value
}

The functions were renamed, so rename them on the form as well.

<LABEL FOR="example"><font size="-2" color="#FFFFFF">1</font></LABEL>
<select name="example" size="1" id="example" onChange="redirectTop(this.options.selectedIndex)">
<option selected>Select From Here</option>
...
</select>
<input type="button" name="test" value="Go!" onClick="go1()" onKeyPress="go1()"></p>


When I did this the local copy I made workd just fine.

ShriekForth

[mikedean]

Thanks for those replies guys. I changed the fields as suggested, but still get an error on trying it
<groupTop[...][...].text' is null or not an object.>

Heres the relevant bit of script. I really do thank you for your help, but if you could spot what Ive done wrong in the following it would be a massive help.
Regards
Mike

<form name="selectionbox" action="#">
<p>
<LABEL FOR="example"><font size="-2" color="#FFFFFF">1</font></LABEL>
<select name="example" size="1" id="example" onChange="redirectTop(this.options.selectedIndex)">
<option selected>Select From Here</option>
<option>About Us</option>
<option>Area Homepages</option>
<option>Members Area</option>
<option>Dev Zone</option>
<option>Search</option>
<option>Control Centre</option>
</select><font color="#FFFFFF" size="-3">
<LABEL FOR="stage2">1</LABEL></font>
<select name="stage2" id="stage2" size="1">
<option selected>-----------------</option>
</select>
<input type="button" name="test" value="Go!" onClick="go()" onKeyPress="go()"></p>
<script TYPE="text/javascript">
<!--


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

groupTop[0][0]=new Option("-----------------","")

groupTop[1][0]=new Option("Click Go","aboutus.shtml")

groupTop[2][0]=new Option("Select Area","")
groupTop[2][1]=new Option("Derby","/clspbeta/eastmidlands/derby")
groupTop[2][2]=new Option("Derbyshire","/clspbeta/eastmidlands/derbyshire")
groupTop[2][3]=new Option("Greater Nottingham","/clspbeta/eastmidlands/greaternotts")
groupTop[2][4]=new Option("Leicester","/clspbeta/eastmidlands/leicester")
groupTop[2][5]=new Option("Leicestershire","/clspbeta/eastmidlands/leicestershire")
groupTop[2][6]=new Option("Lincolnshire & Rutland","/clspbeta/eastmidlands/lincsrutland")
groupTop[2][7]=new Option("North Nottinghamshire","/clspbeta/eastmidlands/northnotts")
groupTop[2][8]=new Option("Northamptonshire","/clspbeta/eastmidlands/northants")

groupTop[3][0]=new Option("Members Login","memberslogin.html")
groupTop[3][1]=new Option("Members Signup","memberssignup.shtml")

groupTop[4][0]=new Option("DevZone Login","devzonelogin.html")
groupTop[4][1]=new Option("DevZone Signup","devzonesignup.html")

groupTop[5][0]=new Option("Click Go","http://www.directory.com")

groupTop[6][0]=new Option("Control Login","controlcentrelogin.html")
groupTop[6][1]=new Option("Control Signup","controlcentresignup.html")


var tempTop=document.selectionbox.stage2

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

function go(){
location=tempTop.options[tempTop.selectedIndex].value
}
//-->
</script>
</form>
</td>
</tr>
</table>


<table width="100%" summary="This table is for layout purposes only" cellspacing="3" cellpadding="3" height="186">
<tr>
<td width="7%" align="left" valign="top" rowspan="3" height="177">
<p align="center">


<font face="Times New Roman">&nbsp;</font><img border="0" src="/clspbeta/images/librarysidebar.jpg" width="57" height="265" alt="library page logo"></td>
<td width="80%" align="left" valign="top" height="8">
ssdfsffsfsdsa sadf sdf sf asd sdf as fsdf asdf asfasd sdf sdf afsd sdfs asf sfs
fasd asdfsdfsd fsafasfjasdf asfh sdjaashf jfas fas sjf shfa shfjs fhsjf asjkf
asjl sajf asdjfkl hsdkjf hsjfh ajsf hsdjkf haf hsjkfh kjsh fajf hjkh jhf sajfh
hfjkfhsd kjfh sdkjf hsjsdkhf sahf ashfasdjkf hasdkjhsah s kjfhasjkfh asdh
asdlfhl</td>
<td width="9%" align="left" valign="top" rowspan="3" height="177"></td>
</tr>
<tr>
<td width="80%" align="left" valign="top" height="37">
<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>Webmaster Sites</option>
<option>News Sites</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("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");

group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","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("JavaScript Kit","http://javascriptkit.com");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");

secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");

secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");
secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.net/");

secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");
secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");
secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","http://www.news.com");
secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");

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){
window.location=temp1[z].value
}

//-->
</script>
</td>
</tr>
</table>

[mikedean]

You probably found that already in the source code above, but I missed one of the changes to Top. Found it, corrected it, tried it, it works! :thumbsup:
Thank you very much indeed, I'm indebted to you both
Mike :D