<?php
$countrycode=$_GET["countrycode"];

include("key.php");
$connection = mysql_connect($mysql_host_name,$username, $password) or die(mysql_error());
$db = mysql_select_db($mysql_db_name,$connection) or die ("Couldn't select database.");

mysql_select_db("getCities", $connection);

$sql="SELECT city_id, countrycode, name, nr_hotels FROM getCities WHERE countrycode = '".$countrycode."' ORDER BY name";

$result = mysql_query($sql);
echo "
<select name=\"city_id\"  style=\"font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size:15px \">
<OPTION VALUE=\"0\">-----------------------------------------
";

$options="";

while($row = mysql_fetch_array($result))
 {
 
$cityname=$row["name"];
$city_id=$row["city_id"];
$nr_hotels=$row["nr_hotels"];
$options.="<OPTION VALUE=\"$city_id\">".$cityname." (".$nr_hotels." hotels)";

}
echo $options;

echo "</select>";

mysql_close($connection);
?>

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="ajax.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

<row>Bob,bob@abc.com</row>
<row>Sally,sally@123.com</row>

var cs = document.getElementById("<your select element id here");
	//remove all options from the select
	while ( cs.options.length )
	{
		cs.remove(cs.options[0]);
	}
	for ( var i = 0; i < company_email.length; i++ )
	{
		var newOpt=document.createElement('option');
		var tmp = company_email[i].split(",");
		newOpt.text=tmp[0];// the text will be the persons name
		try
		{
			cs.add(newOpt,null); // standards compliant
		}
		catch(ex)
		{
			cs.add(newOpt); // IE only
		}
		cs.options[i].value = tmp[1];//the value will be the persons email
		cs.selectedIndex = 0;//select the first option, should be default but make sure
	}

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r";
echo "<response>\r\r";
//=============================================================================//
$dbconn = NULL;
function dbconnect($verbose=true) {
	global $dbconn;
	include('<usernames and pws come in here>');
	if (!$dbconn = @mysql_connect("localhost",$name,$pw)){return false;}
	if($verbose){echo "\r<!-- opening mysql connection -->\r";}
	return true;}
//=============================================================================//

// this function creates a string delimited by "^": "Bob Smith,bob@abc.com^Sally White,sally@xyz.com^John Doe,jdoe@msn.com"

// this function actually serves a bunch of uses, not just the email, I stripped out everything else
// there are some queries where I want unique results only, others I want all results, hence the 'allowDuplicates' toggle


function db_fetch_str($table,$needle,$haystack_1=1,$match_1=1,$allowDuplicates=false,$haystack_2=1,$match_2=1) {
	$str = "";
	$sql = "SELECT $needle FROM $table WHERE $haystack_1 = '$match_1' AND $haystack_2 = '$match_2'";
	$result = @mysql_query($sql);
	if ( !$result || !mysql_affected_rows())
	{
		$str .= "-- NONE --";
	}
	else
	{
		$delimiter = "";
		$dups = array();
		while ( $row = @mysql_fetch_array($result))
		{
			if ( $allowDuplicates || !in_array($row[$needle],$dups) )
			{
				if (!$allowDuplicates){array_push($dups,$row[$needle]);}
				$str .= $delimiter.$row[$needle];
				$delimiter = "^";
			}
		}
	}
	return($str);
}
// ------------------------------------------------------------- //
$connection_open = dbconnect(false) or die("	<status>FAILED DBCONN</status>\r</response>");
@mysql_select_db("<name of your database>") or die("	<status>FAILED DBSELECT</status>\r</response>");

echo "<status>SUCCESS</status>\r";

echo "<email>".db_fetch_str('email','email',1,1,true)."</email>\r";

echo "\r</response>";
if ($connection_open){@mysql_close($dbconn);}?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function HttpClient() { } // HTTPCLIENT CLASS
HttpClient.prototype = {
	// type GET,POST passed to open
	requestType:'GET',
	// when set to true, async calls are made
	isAsync:true,
	// where an XMLHttpRequest instance is stored
	xmlhttp:false,
	// what is called when a successful async call is made
	callback:false,
	// what is called when send is called on XMLHttpRequest
	// set your own function to onSend to have a custom loading
	// effect
	onSend:function()
	{
		//document.getElementById('HttpClientStatus').style.display = 'block';
	},
	
	// what is called when readyState 4 is reached, this is
	// called before your callback
	onload:function()
	{
		//document.getElementById('HttpClientStatus').style.display = 'none';
	},
	
	// what is called when an http error happens
	onError:function(error)
	{
		alert(error);
	},
	
	// method to initialize an xmlhttpclient
	init:function()
	{
		try
		{
			// Mozilla / Safari
			this.xmlhttp = new XMLHttpRequest();
		}
		catch (e)
		{
			// IE
			var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
				 'MSXML2.XMLHTTP.4.0',
				 'MSXML2.XMLHTTP.3.0',
				 'MSXML2.XMLHTTP',
				 'Microsoft.XMLHTTP');
			var success = false;
			for (var i=0;i < XMLHTTP_IDS.length && !success; i++)
			{
				try
				{
					this.xmlhttp = new ActiveXObject
					(XMLHTTP_IDS[i]);
					success = true;
				}
				catch (e)
				{}
			}
			if (!success)
			{
				this.onError('Unable to create XMLHttpRequest.');
			}
		}
	},
	// method to make a page request
	// @param string url  The page to make the request to
	// @param string payload  What you're sending if this is a POST
	//                        request
	makeRequest: function(url,payload)
	{
		if (!this.xmlhttp)
		{
			this.init();
		}
		this.xmlhttp.open(this.requestType,url,this.isAsync);
		
		// set onreadystatechange here since it will be reset after a
		//completed call in Mozilla
		var self = this;
		this.xmlhttp.onreadystatechange = function()
		{
			self._readyStateChangeCallback();
		}
		if (this.requestType == "POST")
		{
			this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			this.xmlhttp.setRequestHeader("Content-length", payload.length);
			this.xmlhttp.setRequestHeader("Connection", "close");
		}
		
		this.xmlhttp.send(payload);
		
		if (!this.isAsync)
		{
			return this.xmlhttp.responseXML;
		}
	},
	
	// internal method used to handle ready state changes
	_readyStateChangeCallback:function()
	{
		switch(this.xmlhttp.readyState)
		{
			case 2:
				this.onSend();
				break;
			case 4:
				this.onload();
				if (this.xmlhttp.status == 200)
				{
					this.callback(this.xmlhttp.responseXML);
				}
				else
				{
					this.onError('HTTP Error Making Request: ' + '[' + this.xmlhttp.status + ']' + ' ' + this.xmlhttp.statusText);
				}
				break;
		}
	}
}

var client = new HttpClient();// create an instance of the object
client.isAsync = false;// I personally set this to false to hold execution until the request is finished
var company_email = null;// declare the global
var http_status = null; // global I use to keep track of status
function get_global_email()
{
	client.requestType = "GET";
	// function to handle completed calls
	client.callback = function(XMLresult)
	{
		if (XMLresult.getElementsByTagName("status"))// did XML page create a 'status' element?
		{
			http_status = XMLresult.getElementsByTagName("status")[0].childNodes[0].nodeValue;
		}else{// if no 'status' element was returned, set global http_status to FAILED NO STATUS
			http_status = "FAILED NO STATUS";
			return;
		}
		if (http_status == "SUCCESS") {// if we got a SUCCESS in 'status' element, put row data in global variable
			// use of split("^") gives us an array of "name,email" pairs.
			company_email = XMLresult.getElementsByTagName("email")[0].childNodes[0].nodeValue.split("^");
		}
	}
	client.makeRequest('test.ajax.php?sid='+Math.random(),null);
	return;
}

function build_contact_list()
{
        http_status=null; // make sure it's clear beforehand 
	get_global_email(); // call our ajax function to retrieve contact info from database
	
        // handle incomplete requests
        if (http_status != "SUCCESS"){alert("something went wrong:"+http_status);return;}
	
        var cm = document.getElementById("contact_menu"); // get the select element
	
	// remove all options from this select element
	while ( cm.options.length )
	{
		cm.remove(cm.options[0]);
	}
	
	for ( var i = 0; i < company_email.length; i++ )
	{
		var newOpt=document.createElement('option');
		// now seperate the name from the email address
		var tmp = company_email[i].split(",");
		newOpt.text=tmp[0];// set the persons name as the text of the option element
		try
		{
			cm.add(newOpt,null); // standards compliant
		}
		catch(ex)
		{
			cm.add(newOpt); // IE only
		}
		cm.options[i].value = tmp[1];// set the email address as the value of the option element
		cm.selectedIndex = 0;
	}
}


-->
</script>
</head>

<body>
	<div>
		<select id="contact_menu">
			<option></option><!-- dummy option so you don't throw validation errors -->
		</select>
		<br>
		<button type="button" onClick="build_contact_list()">Build The Menu</button>
	</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var cities = new Array();
cities["country1"]="c1city1,c1city2,c1city3";
cities["country2"]="c2city1,c2city2,c2city3";
cities["country3"]="c3city1,c3city2,c3city3";


function build_city_menu(country)
{
	var cs = document.getElementById("city_menu");
	// remove all options from it
	while ( cs.options.length )
	{
		cs.remove(cs.options[0]);
	}
	
	var cty = cities[country].split(",");
	
	for ( var i = 0; i < cty.length; i++ )
	{
		// create new option element
		var newOpt=document.createElement('option');
		
		newOpt.text=cty[i];
		// try adding the option to the select object
		try
		{
			cs.add(newOpt,null); // standards compliant
		}
		catch(ex)
		{
			cs.add(newOpt); // IE only
		}
		// set the value to same as the text
		cs.options[i].value = cty[i];
	}
	// set selected index
	cs.selectedIndex = 0;
}


-->
</script>

</head>

<body onLoad="build_city_menu('country1')">

<select id="country_menu" onchange="build_city_menu(this.value)">
       <option value="country1" selected="selected">country 1</option>
       <option value="country2">country 2</option>
       <option value="country3">country 3</option>
</select>

<select id="city_menu">
   <option></option>
</select>

</body>
</html>

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r";
echo "<response>\r\r";
//=============================================================================//
$dbconn = NULL;
function dbconnect($verbose=true) {
	global $dbconn;
	include('<usernames and pws come in here>');
	if (!$dbconn = @mysql_connect("localhost",$name,$pw)){return false;}
	if($verbose){echo "\r<!-- opening mysql connection -->\r";}
	return true;}
//=============================================================================//
$connection_open = dbconnect(false) or die("	<status>FAILED DBCONN</status>\r</response>");
@mysql_select_db("<name of your database>") or die("	<status>FAILED DBSELECT</status>\r</response>");
// ------------------------------------------------------------- //
echo "<status>SUCCESS</status>\r";

$sql = "SELECT * FROM test";
$result = @mysql_query($sql);
if ( !$result || !mysql_affected_rows())// if query failed OR no rows in the table output -- NONE --
{
	echo "<countries>-- NONE --</countries>\r";
}
else
{
	while ($row = @mysql_fetch_array($result))
	{
		echo "<countries>" . $row[country] . "|" . $row[cities] . "</countries>\r";
	}
	
}
//================================================================================================
echo "\r</response>";
if ($connection_open){@mysql_close($dbconn);}?>

<response>
<status>SUCCESS</status>
−
	<countries>
America|Los Angeles,New York,Miami,Dallas,Portland,Chicago,Casper
</countries>
−
	<countries>
Canada|Vancouver,Abbotsford,Armstrong,Burnaby,Castlegar,Chilliwack,Colwood,Coquitlam
</countries>
−
	<countries>
Mexico|Cancun,Cabo San Lucas,Los Cabos,San Jose del Cabo,Cozumel,Isla Mujeres,Riviera Maya,Acapulco
</countries>
</response>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function HttpClient() { } // HTTPCLIENT CLASS
HttpClient.prototype = {
	// type GET,POST passed to open
	requestType:'GET',
	// when set to true, async calls are made
	isAsync:true,
	// where an XMLHttpRequest instance is stored
	xmlhttp:false,
	// what is called when a successful async call is made
	callback:false,
	// what is called when send is called on XMLHttpRequest
	// set your own function to onSend to have a custom loading
	// effect
	onSend:function()
	{
		//document.getElementById('HttpClientStatus').style.display = 'block';
	},
	
	// what is called when readyState 4 is reached, this is
	// called before your callback
	onload:function()
	{
		//document.getElementById('HttpClientStatus').style.display = 'none';
	},
	
	// what is called when an http error happens
	onError:function(error)
	{
		alert(error);
	},
	
	// method to initialize an xmlhttpclient
	init:function()
	{
		try
		{
			// Mozilla / Safari
			this.xmlhttp = new XMLHttpRequest();
		}
		catch (e)
		{
			// IE
			var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
				 'MSXML2.XMLHTTP.4.0',
				 'MSXML2.XMLHTTP.3.0',
				 'MSXML2.XMLHTTP',
				 'Microsoft.XMLHTTP');
			var success = false;
			for (var i=0;i < XMLHTTP_IDS.length && !success; i++)
			{
				try
				{
					this.xmlhttp = new ActiveXObject
					(XMLHTTP_IDS[i]);
					success = true;
				}
				catch (e)
				{}
			}
			if (!success)
			{
				this.onError('Unable to create XMLHttpRequest.');
			}
		}
	},
	// method to make a page request
	// @param string url  The page to make the request to
	// @param string payload  What you're sending if this is a POST
	//                        request
	makeRequest: function(url,payload)
	{
		if (!this.xmlhttp)
		{
			this.init();
		}
		this.xmlhttp.open(this.requestType,url,this.isAsync);
		
		// set onreadystatechange here since it will be reset after a
		//completed call in Mozilla
		var self = this;
		this.xmlhttp.onreadystatechange = function()
		{
			self._readyStateChangeCallback();
		}
		if (this.requestType == "POST")
		{
			this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			this.xmlhttp.setRequestHeader("Content-length", payload.length);
			this.xmlhttp.setRequestHeader("Connection", "close");
		}
		
		this.xmlhttp.send(payload);
		
		if (!this.isAsync)
		{
			return this.xmlhttp.responseXML;
		}
	},
	
	// internal method used to handle ready state changes
	_readyStateChangeCallback:function()
	{
		switch(this.xmlhttp.readyState)
		{
			case 2:
				this.onSend();
				break;
			case 4:
				this.onload();
				if (this.xmlhttp.status == 200)
				{
					this.callback(this.xmlhttp.responseXML);
				}
				else
				{
					this.onError('HTTP Error Making Request: ' + '[' + this.xmlhttp.status + ']' + ' ' + this.xmlhttp.statusText);
				}
				break;
		}
	}
}
//----------------------------------------------------------------------------------------------------//

var client = new HttpClient();
client.isAsync = false;
var countries = "";
var cities = new Array();
http_status = null;

function get_country_city_list()
{
	client.requestType = "GET";
	// function to handle completed calls
	client.callback = function(XMLresult)
	{
		if (XMLresult.getElementsByTagName("status"))// did XML page create a 'status' element?
		{
			http_status = XMLresult.getElementsByTagName("status")[0].childNodes[0].nodeValue;
		}else{// if no 'status' element was returned, set global http_status to FAILED
			http_status = "FAILED NO RESPONSE";
			return;
		}
		if (http_status == "SUCCESS") {// if we got a SUCCESS in 'status' element, put row data in global variable
		
			// var results will be an array of all the <countries></countries> rows in the XML document
			var results = XMLresult.getElementsByTagName("countries");
			
			var comma = "";
			
			// I am going to make countries a comma delimited string of the country names
			countries = ""; // make sure we clear this global first
			
			for (var i=0; i<results.length; i++){// itterate through results
				
				// each row in results is formatted "countryname | city,city,city,city"
				// by spliting the result at the pipe we get a 2 element array
				//tmp[0]=country name  tmp[1]=string of cities
				var tmp = results[i].childNodes[0].nodeValue.split("|");
			
				countries += comma + tmp[0];// build the list of countries
			
				comma = ",";
			
				cities[tmp[0]] = tmp[1]; // use country name as key for cities array and assign the cityname string
			
			}			
		}
	}
	client.makeRequest('country_test.php?sid='+Math.random(),null);
	return;
}

function build_country_menu()
{
	http_status = null; // make sure this is cleared
	
	get_country_city_list() // make the ajax call
	
	if (http_status != "SUCCESS"){alert("something went wrong");return;}
	
	var cc = document.getElementById("country_menu");
	// remove all options from it
	while ( cc.options.length )
	{
		cc.remove(cc.options[0]);
	}
	
	var ctry = countries.split(",");
	
	for ( var i = 0; i < ctry.length; i++ )
	{
		// create new option element
		var newOpt=document.createElement('option');
		
		newOpt.text=ctry[i];
		// try adding the option to the select object
		try
		{
			cc.add(newOpt,null); // standards compliant
		}
		catch(ex)
		{
			cc.add(newOpt); // IE only
		}
		// set the value to same as the text
		cc.options[i].value = ctry[i];
	}
	// set selected index
	cc.selectedIndex = 0;
	build_city_menu(ctry[0]); // will need to rebuild the city list
}


function build_city_menu(country)
{
	var cs = document.getElementById("city_menu");
	// remove all options from it
	while ( cs.options.length )
	{
		cs.remove(cs.options[0]);
	}
	
	var cty = cities[country].split(",");
	
	for ( var i = 0; i < cty.length; i++ )
	{
		// create new option element
		var newOpt=document.createElement('option');
		
		newOpt.text=cty[i];
		// try adding the option to the select object
		try
		{
			cs.add(newOpt,null); // standards compliant
		}
		catch(ex)
		{
			cs.add(newOpt); // IE only
		}
		// set the value to same as the text
		cs.options[i].value = cty[i];
	}
	// set selected index
	cs.selectedIndex = 0;
}
-->
</script>
</head>

<body onload="build_country_menu()">

<select id="country_menu" onchange="build_city_menu(this.value)">
   <option></option>
</select>

<select id="city_menu">
   <option></option>
</select>

</body>
</html>