AJAX not updating properly

[esport]

Hi Guys, I have a drop down list when selected populates a text area from data from a database. However, when I select an option from the list the first time, it says 'undifined'. When I select another item, the original item I selected data appears. Below is th javascript I am using:

 

<script language="javascript">

var xmlHttp = createXmlHttpRequestObject();
var response;

function get_template(){


var code = document.getElementById('email_templates').value;
if(code){	

	var url = "get_email_templates.php?ID="+code; 
			xmlHttp.open("GET", url, true);
			xmlHttp.onreadystatechange = handleRequestStateChange;				
			xmlHttp.send(null); 

			document.getElementById('comments').value=response;

}
}

function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
	"MSXML2.XMLHTTP.5.0",
	"MSXML2.XMLHTTP.4.0",
	"MSXML2.XMLHTTP.3.0",
	"MSXML2.XMLHTTP",
	"Microsoft.XMLHTTP");
// try every prog id until one works
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
	try
	{
	// try to create XMLHttpRequest object
		xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
	}
	catch (e) {}
	}
}
// return the created object or display an error message
if (!xmlHttp)
	alert("Error creating the XMLHttpRequest object.");
else
	return xmlHttp;
}



// function that handles the HTTP response
function handleRequestStateChange()
{
//var response='';
// display the status of the request
if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK"
	if (xmlHttp.status == 200)
	{
		try
		{
			// read the message from the server
				response = xmlHttp.responseText;
			//	alert(response);
				return response; 
		}
		catch(e)
		{
			// display error message
			alert("Error reading the response: " + e.toString());
		}
	}
	else
	{
		// display status message
		alert("There was a problem retrieving the data:\n" +
		xmlHttp.statusText);
	}
}
}




</script>

 

And here is the html:

 

<textarea name="comments" cols="90" rows="7" id="comments"></textarea>
  <br />
                                                                                                      
<select name="select" id="email_templates"  onchange="get_template()">
   <option value=''>:::: Please Select a Template :::: </option>
<?php
$allTemplates = mysql_query("SELECT * FROM email_templates WHERE category='warranty'",$server);
echo mysql_error();
while($getTemplates = mysql_fetch_array($allTemplates)){
?>
           <option value="  <?= $getTemplates['ID'] ?>">
            <?= $getTemplates['name'] ?>
          </option>
   <?
  }
 ?>
   </select>

 

I have test the PHP that it calls and the is outputing correctly.

Can someone please advise why it does this.

 

Thanks in advance

 

Daniel

[esport]

fixed it.... I placed

 

document.getElementById('comments').value=response;

 

in the funtion

 

handleRequestStateChange()

 

And it worked fine. But not sure if its the best way to do it.