Hi People.
I've got some issue. I'm trying to develop a form which has 3 dropdown list.
COUNTRY, STATE AND TOWN and a submit button.
I'm selecting entire countries from database and populating it in the country dropdown list. What I want is, on change of country list... based on the particular country I select, states of that country should get loaded in States dropdown list... and on selection of States.. Town should get loaded.
I've managed to do this. Problem is when I click the submit button. I want these selected values to be posted in next page. Because I will be using these posted values to write some query. Country value is posted fine. But states and Town value is not getting posted.
This is my code:
- Code: Select all
<?php
include('config.php');
$sqlcountry= "SELECT DISTINCT country FROM contact";
$resultcountry= mysql_query($sqlcountry);
?>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
function get_states(country)
{
$.ajax({
type: "POST",
url: "states.php", /* The country id will be sent to this file */
beforeSend: function () {
$("#state").html("<option>Loading ...</option>");
},
data: "country="+country,
success: function(msg){
$("#state").html(msg);
}
});
}
function get_towns(states)
{
$.ajax({
type: "POST",
url: "towns.php", /* The state id will be sent to this file */
beforeSend: function () {
$("#town").html("<option>Loading ...</option>");
},
data: "states="+states,
success: function(msg){
$("#town").html(msg);
}
});
}
</script>
</head>
<form action="filtercat.php" method="post">
<tr>
<td>Country </td>
<td>
<select name="country" onchange="get_states(this.value)">
<option>Select Country</option>
<?php
while($rowcountry=mysql_fetch_array($resultcountry))
{
?>
<option value="<?php echo $rowcountry['country']; ?>"><?php echo $rowcountry['country']; ?></option>
<?php
}
?>
</select>
</td>
<td>State:</td>
<td id="state">
<select name="state">
<option>Select State</option>
</select>
</td>
<td>City / Town:</td>
<td id="town">
<select name="town" id="townsbox">
<option>Select City / Town</option>
</select>
</td>
<input type="hidden" value="All categories" name="hidcat">
<td><input type="image" name="submitcat" src="images/filter.png"></td>
</form>
This is my states.php
- Code: Select all
<?php
include('config.php');
$country = $_POST['country'];
$sql_state = "SELECT DISTINCT state FROM contact WHERE country = '$country'";
$result_state = mysql_query($sql_state);
?>
<select name="state" id="state" onchange="get_towns(this.value)">
<option>Select States</option>
<?php
while($row_state = mysql_fetch_array($result_state))
{
?>
<option value="<?php echo $row_state['state'];?>" ><?php echo $row_state['state']; ?></option>;
<?php
}
?>
</select>
And this is towns.php
- Code: Select all
<?php
include('config.php');
$states = $_POST['states'];
$sql_town = "SELECT DISTINCT town FROM contact WHERE state = '$states'";
$result_town = mysql_query($sql_town);
?>
<select name="town" id="town">
<option>Select Town</option>
<?php
while($row_town = mysql_fetch_array($result_town))
{
?>
<option value="<?php echo $row_town['town'];?>" ><?php echo $row_town['town']; ?></option>;
<?php
}
?>
</select>
In filtercat.php.... I tried to echo the posted values. But only country value got displayed. States and Towns go blank.
Sorry for the lengthy post and thanx for your time and consideration
Regards.
