AJAX PHP issue

I'm trying to populate a select list of Cities when a user selects a state. The update occurs when the state field loses the focus (onblur).

I can select the data correctly from the database, but I'm having a horrid time getting the returned data into the option fields. I am Javascript clueless, but I'm trying to learn. I could've had this done hours ago if I had just used PHP and reloaded the page.

Here's the part I'm having issues with:

<script language="javascript" type="text/javascript">
var url = "includes/getCity.php?param="; // The server-side script

function handleHttpResponse() {
if (http.readyState == 4) {

if (http.responseText.indexOf('invalid') == -1) {
// Split the comma delimited response into an array
results = http.responseText.split(",");
var selbox = document.calendar.city;

selbox.options.length = 0;
for(i=0; i<results[counter]; i++) {
selbox.options[selbox.options.length] = new Option(results[counter],results[counter]);
selbox.options.length++;
}
isWorking = false;
}
}
}

var isWorking = false;

function updateCity() {
if (!isWorking && http) {
var stateValue = document.getElementById("state").value;
http.open("GET", url + escape(stateValue), true);
http.onreadystatechange = handleHttpResponse;

isWorking = true;
http.send(null);
}
}

function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>

===================Here's the actual body part.
<form method="POST" action="<?= $PHP_SELF; ?>" name="calendar">
<table>
<tr>
<td>State: </td><td><?= select_state(); ?></td></tr>
<tr><td>City:</td><td><select name="city" id="city"></select></td>
</tr>
</table>
</form>

I need this to populate the city dropdown from the HTTP response.



================================
Angela Gann
CrimsonDryad Web Design Services
Web Design, Custom Software Development
http://www.crimsondryad.com

Here.

function handleHttpResponse() {
	if (http.readyState == 4) {
		if (http.responseText.indexOf('invalid') == -1) {
			cities = http.responseText.split(",");
			options = document.getElementById('city').options;
			options.length = 0;
			for (counter = 0; counter < cities.length; counter  ) {
				options[options.length] = new Option(cities[counter]);
			}
		}
	}
}

1. You were using the wrong variables in the loop
2. Unnecessary to set the length property - adding option increases it automatically

Atropos | openvein.org

Thanks a ton. Like I said, I'm Javascript clueless, though I'm trying to learn. :)

I appreciate your help.

================================
Angela Gann
CrimsonDryad Web Design Services
Web Design, Custom Software Development
http://www.crimsondryad.com