Slight Problem.. With Addign to Function

Hi,

I have a function here:

	var AdminResponse = "";

	function parseResponse(){

		var nText = AdminResponse.getElementsByTagName('optionText');
		var nVal = AdminResponse.getElementsByTagName('optionVal');
		document.forms["area"].elements['town'].options.length = 1;
		
		for (i=0; i<nText.length; i++)
			{ 
			 var nOption = document.createElement('option'); 
			 var isText = document.createTextNode(nText[i].firstChild.data); 
			 nOption.setAttribute('value',nVal[i].firstChild.data); 
			 nOption.appendChild(isText); 
			 document.forms["area"]['town'].appendChild(nOption); 
			}
	}

Code (markup):

This is part of a Ajax drop down menu for region and town, i want to mod this so that it can work on three different fields as i have three selections for region and town.

I thought this would work but it doesn't.

var AdminResponse = "";

	function parseResponse(field){

		var nText = AdminResponse.getElementsByTagName('optionText');
		var nVal = AdminResponse.getElementsByTagName('optionVal');
		document.forms["area"].elements['field'].options.length = 1;
		
		for (i=0; i<nText.length; i++)
			{ 
			 var nOption = document.createElement('option'); 
			 var isText = document.createTextNode(nText[i].firstChild.data); 
			 nOption.setAttribute('value',nVal[i].firstChild.data); 
			 nOption.appendChild(isText); 
			 document.forms["area"]['field'].appendChild(nOption); 
			}
	}

Code (markup):

On the drop down itself i have put:

onchange="update(this.value,'town')"

Code (markup):

Any ideas?

 

var AdminResponse = "";

function parseResponse(){

var nText = AdminResponse.getElementsByTagName('optionText'); //why are you getting elements from an empty string???
var nVal = AdminResponse.getElementsByTagName('optionVal'); // same...
document.forms["area"].elements['town'].options.length = 1; // why are you setting the length? the length is a read only value.

PHP:

 

This is the full code:

	var AdminResponse = "";

	function parseResponse(field){

		var nText = AdminResponse.getElementsByTagName('optionText');
		var nVal = AdminResponse.getElementsByTagName('optionVal');
		document.forms["area"].elements[field].options.length = 1;
		
		for (i=0; i<nText.length; i++)
			{ 
			 var nOption = document.createElement('option'); 
			 var isText = document.createTextNode(nText[i].firstChild.data); 
			 nOption.setAttribute('value',nVal[i].firstChild.data); 
			 nOption.appendChild(isText); 
			 document.forms["area"][field].appendChild(nOption); 
			}
	}

	function update(nVal){

		var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
		AdminRequest.onreadystatechange = function()
			{
		 	 if (AdminRequest.readyState == 4)
				{
		 	 	 if (AdminRequest.status == 200)
					{
			 	 	 AdminResponse = AdminRequest.responseXML;
			 	 	 parseResponse();
					}
		 	 	 else 	{
				 	 alert('Error Update.php File '+ AdminRequest.statusText);
					}
				}
			}
		var infoStr = "?choice="+nVal;
		AdminRequest.open("GET", "Update.php"+infoStr, true);
		AdminRequest.send(null); 
	}

Code (markup):

 

Look at my comments in the above code.

 

I am unsure to be honest i downloaded the code from a site so did not write it myself.

 

Where did you get it from?

I searched for a this kind of script (http://google.com/search?q=ajax+select+list) but most of those results are poorly coded, which is surprising as this is really simple to write (couple ajax request and server-side sql queries).

 

I got it from here: www.ajaxforums.net but the site seems to be down now :s