Hello All,
I'm working on a script which I'm sure has been done many times, using 3 dropdown list boex to select country, state, and city.
Using PHP, AJAX, and MYSQL
Whats working:
I'm able to populate the country and select. At the sametime I can populate the the state based on country select.
Whats not working:
city selection.
- not getting any errors to work with either.
the state variable is passed throubh but the country isnt.
I believe the problem is in "function getCity(countryId,stateId)" ajax script
Any help you can give me would be greatly appreciated.
<html>
<head>
<title> City wide Helpdesk </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function getXMLHTTP()
{ //fuction 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;
}
function getState(countryId)
{ var strURL="findprovstate.php?country="+countryId;
var req = getXMLHTTP();
if (req)
{ req.onreadystatechange = function()
{ if (req.readyState == 4)
{ if (req.status == 200)
{ document.getElementById("statediv").innerHTML=req.responseText; }
else
{ alert("There was a problem while using XMLHTTP:\n" + req.statusText); }
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(countryId,stateId)
{ var strURL="findCity.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();
if (req)
{ req.onreadystatechange = function()
{ if (req.readyState == 4)
{ 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);
}
}
</script>
</head>
<body>
<form method="post" name="form1">
<table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody>
<tr>
<td width="150">Country</td>
<td width="150">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">';
<?php
require_once("C:\wamp\www\servicebid\inc\FindCountry.php");
while($row=mysqli_fetch_assoc($result))
{if($nextcountry = $row['country'])
{ echo '<option value="' . $row['country'] . '">' . $row['country'] . '</option>'; }
}
?>
</select></td>
</tr>
<tr style="">
<td>State</td>
<td >
<div id="statediv">
<select name="state" >
<option>Select Country First</option>
</select>
</div>
</td>
</tr>
<tr style="">
<td>City</td>
<td ><div id="citydiv">
<select name="city">
<option>Select State First</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
This code is used to populate the state/province.
<?php
require_once("C:\wamp\www\servicebid\inc\connection.php");
$country = $_GET['country'];
$provinceState_query = "SELECT DISTINCT province from tb_location where country = '$country'";
$result= mysqli_query($dbconnect, $provinceState_query) or die('<br/>Error reading Database:'.mysql_error());
?>
<select name="state" onchange='getCity("<?=$country?>",this.value)'>
<option>Select State</option>
<?php
while($row=mysqli_fetch_assoc($result))
{ echo '<option value="' . $row['province'] . '">' . $row['province'] . '</option>'; }
?>
</select>
This code below is used to populate the city dropdown list box.
at this stage the state is comming through but tnot the country.
<?php
require_once("C:\wamp\www\servicebid\inc\connection.php");
$countryId = $_GET['country'];
$stateId = $_GET['state']; // works
echo '<br> ==>:1'.$countryId;
echo '<br> ==>:2'.$stateId; //works
$city_query = "SELECT city from tb_location WHERE country ='$countryId' AND province='$stateId'";
$result= mysqli_query($dbconnect, $city_query) or die('<br/>Error reading Database:'.mysql_error());
while($row=mysqli_fetch_array($result))
{ //testing
echo 'br>'.$row['city'];
}
?>
<select name="city">
<option>Select City</option>
<?php
while($row=mysql_fetch_array($result))
{ echo '<option value="' . $row['city'] . '">' . $row['city'] . '</option>'; }
?>
</select>