Ajax Country City Select Menu onChange() not working

Question

I've come across an excellent tutorial for creating drop down menus that can change dynamically.

Here is the link.

http://roshanbh.com.np/2008/01/populate-triple-drop-down-list-change-options-value-from-database-using-ajax-and-php.html

Here is the demo

http://roshanbh.com.np/dropdown/

---

I am fiddling with the code a bit and I am skipping the portion where you select a state.

Here is the findCity.php file

<!--//---------------------------------+
//  Developed by Roshan Bhattarai    |
//  http://roshanbh.com.np           |
//  Contact for custom scripts       |
//  or implementation help.          |
//  email-nepaliboy007@yahoo.com     |
//---------------------------------+-->
<?
#### Roshan's Ajax dropdown code with php
#### Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
#### if you have any problem contact me at http://roshanbh.com.np
#### fell free to visit my blog http://php-ajax-guru.blogspot.com
?>

<? $country = $_GET['country'];
$link  = mysql_connect("snip","snip","snip");
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('snip');
$query="SELECT city FROM location WHERE country='$country'";
$result=mysql_query($query);

?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<? } ?>
</select>

Opening the findCity.php with a country variable works fine

http://globatum.com/admin/findCity.php?country=United%20States

I am not able to figure out why the value from the country list is not properly passing through this function

function getCity(country) {
        var strURL="findCity.php?country="+ country;
        var req = getXMLHTTP();

        if (req) {

            req.onreadycountrychange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('citydiv').innerHTML=req.responseText;                      
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }

    }

Any ideas here?

ADDED NOTES

function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

Answer 1

You had a javascript error on the page, which @nevermind beat me to point out. That's fine, but you have another problem that seems to just be a misunderstanding on your end. The line

req.onreadycountrychange = function() {

doesn't make sense, and needs to be instead:

req.onreadystatechange = function() {

The name of the function onreadystatechange is a little bit confusing in this context, but it doesn't have anything to do with 'State' as in 'State/Country'. This is referring to the current state of the XMLHttpRequest object. Basically that function, onreadystatechange, just gets called whenever the state of the request object is updated.

Read more about it here: http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

Answer 2

You have syntax error in code, on test page:

if (req.readyState == 4 {

Should be, of course: if (req.readyState == 4 )

If this doesn't fix problem, we can try something else. :)