Firefox and chained select menus

[DorsetBloke]

Hi all,

I have a problem with a script that is driving me round the bend and I do hope someone can shed some light on the matter. I am new to Javascript and need a nudge in the right direction.

I have three select menus - Country, Region and County.

If you select a Country, the Region menu updates. If you then choose a Region, the County menu updates.

I have used a script from GreatASP.co.uk and, after a small amount of fiddling and a large amount of swearing, I have this working in IE but Firefox doesn't even try:

<SCRIPT LANGUAGE="Javascript">

function getSelect(selectname,selection,recordset,destination){
	
	if(selection!=''){

	 var doc = null; 

// Make a new XMLHttp object

   if (typeof window.ActiveXObject != 'undefined' ) 
   { 
       doc = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else 
   { 
       doc = new XMLHttpRequest(); 
   }
	 
// Load the result from the response page

	if (doc){ 	 
		doc.open("GET", "populate.asp?selectname="+selectname+"&selection=" + selection+"&recordset="+recordset, false);
		doc.send(null);
// Write the response to the div
		destination.innerHTML = doc.responseText;
	}else{
		destination.innerHTML = 'Browser unable to create XMLHttp Object';
		}
}else{
// Return the next select box back to the default
destination.innerHTML= '<select><option value=""></option></select>';
}

selectname= null
selection = null
recordset = null

}
</SCRIPT>

In the original version from GreatASP, the author puts the following line about the function declaration, but I have found that this actually stops the code from working in IE.

// declare new variables for each new div that you add, and link to the div by ID
var subcatdiv = document.getElementById("subcat_div");

Obviously, I changed the variable name and div name to suit.

I can see what it's for, in that you have to define the variable before the function calls it - indeed, Firefox warns me in the error console if the above line(s) are not included, but still doesn't work when I put them in. It says regiondiv is not defined.

The DOCTYPE of the HTML file is 4.01 Transitional if that helps at all.

The HTML that calls the function is:

<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region',regiondiv);">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>

<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County',countydiv);">
</SELECT>
</DIV>

<DIV ID="countydiv">
<SELECT NAME="Area">
<OPTION></OPTION>
</SELECT>
</DIV>

I have tried replacing various parts of the code with getElementById calls but nothing seems to work. The above code is the only variation of dozens that seems to work in IE and I have never got it to do anything in Firefox.

I realise I have 3 SELECTs called Area - this is because the form needs to produce a URL string that groups Country, Region and County together, separated by commas.

Please help!

Thanks.

[brechtjah]

<SCRIPT LANGUAGE="Javascript"> is depreciated, use type instead:
<script type="text/javascript">
capital tags are not needed by the way, just so you know : - )

Your problem probably lies here:

<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region','regiondiv');">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>

<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County','countydiv');">
</SELECT>
</DIV>

When you call getSelect(), you are forgetting to put single quotes around the div's name too.

[DorsetBloke]

Hi,

Thanks very much for your help.

I tried the code with the apostrophe around the div name in the getSelect as suggested, and changed the language to type. Firefox still refuses to work. I also tried adding in the code that I had left out and that broke IE, as usual.

Could there be a conflict in that I have my SELECTs with the same name of 'Area' ?

Annoyingly, even though I have copied the code from GreatASP, his example on that site works in Firefox.

Any other ideas much appreciated!

[brechtjah]

Could there be a conflict in that I have my SELECTs with the same name of 'Area' ?

Yes that is very much the problem : ) You have to give each selectbox a unique name.

Please also make sure you changed the whole thing:
<script type="text/javascript">
and NOT
<script type="javascript">

Good luck :)