I am creating a registration form for my web site. In my registration form, there are two select boxes to select user's district and there city. So I need to do it, when a user select their district then automatically display city select box with cities which relevant to above selected district. To do this I used Ajax and php. I used findcity.php page to display the city in my register.php page. My problem is when I am try to get city id from the register.php page I cant get it. It I need to get to send with other data from register.php page to database. Please anybody help me to do it. and suggestions are greatly appreciated. thank you.
from my register.php page
<div>
<label for="district">District <img src="../images/required_star.png" alt="required" /> : </label>
<?php
require_once ('../includes/config.inc.php');
require_once( MYSQL2 );
$query="select * from district order by district_id";
$result = mysqli_query( $dbc, $query);
echo '<select name="district" class="text" onChange="getCity(' . "'" . 'findcity.php?district=' . "'" . '+this.value)">';
echo '<option value="">-- Select District --</option>';
while( $row = mysqli_fetch_array($result, MYSQLI_NUM)) {
echo '<option value="' . $row[0] . '"';
// Check for stickyness:
if ( isset( $_POST['district']) && ( $_POST['district'] == $row[0] ))
echo ' selected="selected"';
echo " >$row[1]</option>";
}
echo '</select>';
?>
</div>
<div>
<label for="city">City <img src="../images/required_star.png" alt="required" /> : </label>
<input type="hidden" name="reg_locationid" id="reg_locationid" value="56" />
<div id="citydiv" style="position: relative; top: -14px; left: 130px; margin-bottom: -26px;">
<select name="city" class="text">
<option>-- Select City --</option>
</select>
</div>
</div>
this is findcity.php page
<?php
$districtId=$_GET['district'];
require_once ('../includes/configaration.inc.php');
require_once( MYSQLCONNECTION );
$query="select city_id, city_name from city2 where district_id=$districtId";
$result=mysqli_query( $dbc, $query);
echo '<select name="city" class="text">
<option>-- Select City --</option>';
while($row=mysqli_fetch_array($result, MYSQLI_NUM)) {
echo '<option value="' . $row[0] . '"';
// Check for stickyness:
if ( isset( $_POST['city']) && ( $_POST['city'] == $row[0] )) {
echo ' selected="selected"';
//echo '<input type="hidden" name="city" value="' . $row[0] . '"';
}
echo " >$row[1]</option>";
}
echo '</select>';
?>
this is my ajax functions
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 getCity(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = 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);
}
}