This question already has an answer here:
php mysql using jquery and ajax to populate droplist without refreshing the page
(1 answer)
Closed 9 years ago.
i need to create three dynamic drop list that the second is based on the selection of the first and the third is based on the selection of the second but i get a problem that the second and the third display the default value without any option to choose another values
can anyone help me???
dbconfig.php
<?php
$host = "localhost";
$user = "****";
$password = "****";
$db = "lam_el_chamel_db";
?>
select.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#district").attr("disabled","disabled");
$("select#village").attr("disabled","disabled");
$("select#governorate").change(function(){
$("select#district").attr("disabled","disabled");
$("select#district").html("<option>wait...</option>");
var id = $("select#governorate option:selected").attr('value');
$.post("select_district.php", {id:id}, function(data){
$("select#district").removeAttr("disabled");
$("select#district").html(data);
});
});
$("select#district option:selected").change(function(){
id = $(this).val();
$.post("select_village.php", {id:id}, function(data){
$("select#village").attr("disabled","disabled");
$("select#village").html("<option>wait...</option>");
$("select#village").removeAttr("disabled");
$("select#village").html(data);
});
$("form#select_form").submit(function(){
var cat = $("select#governorate option:selected").attr('value');
var type = $("select#district option:selected").attr('value');
var vil = $("select#village option:selected").attr('value');
if(cat>0 && type>0 && vil>0)
{
var result = $("select#district option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="select_form">
Choose a governorate:<br />
<select id="governorate" name = 'governorate'>
<?php echo $opt->ShowGovernorate(); ?>
</select>
<br /><br />
choose a district:<br />
<select id="district">
<option value="0">choose...</option>
</select>
<br /><br />
choose a village:<br />
<select id="village">
<option value="0">choose...</option>
</select>
<br /><br />
<input type="submit" value="confirm" />
</form>
<div id="result"></div>
</body>
</html>
select_class.php
<?php
class SelectList
{
protected $conn;
public function __construct()
{
$this->DbConnect();
}
protected function DbConnect()
{
include "dbconfig.php";
$this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
mysql_select_db($db,$this->conn) OR die("can not select the database $db");
return TRUE;
}
public function ShowGovernorate()
{
$sql = "SELECT * FROM governorate";
$res = mysql_query($sql,$this->conn);
$governorate = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$governorate .= '<option value="' . $row['governorate_id'] . '">' . $row['governorate_name'] . '</option>';
}
return $governorate;
}
public function ShowDistrict()
{
$sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]";
$res = mysql_query($sql,$this->conn);
var_dump($res);
$district = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>';
}
return $district;
}
public function ShowVillage()
{
$sql = "SELECT village_id, village_name FROM village WHERE district_id=$_POST[id]";
$res = mysql_query($sql,$this->conn);
$village = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$village .='<option value="' .$row['village_id'] . '">' . $row['village_name'] . '</option>';
}
return $village;
}
}
$opt = new SelectList();
?>
select_district.php
<?php
include "select.class.php";
echo $opt->ShowDistrict();
?>
select_village.php
<?php
include "select.class.php";
echo $opt->ShowVillage();
?>
$("select#district option:selected").change(function(){
id = $(this).val();
$.post("select_village.php", {id:id}, function(data){
$("select#village").attr("disabled","disabled");
$("select#village").html("<option>wait...</option>");
$("select#village").removeAttr("disabled");
$("select#village").html(data);
});
try to
$("select#district").change(function(){
id = $(this).val();
$("select#village").attr("disabled","disabled");
$("select#village").html("<option>wait...</option>");
$.post("select_village.php", {id:id}, function(data){
$("select#village").removeAttr("disabled");
$("select#village").html(data);
});
I have found two mistakes in code which have tou pasted.
missing things in code:
$("select#district option:selected").change(function(){
id = $(this).val();
$.post("select_village.php", {id:id}, function(data){
$("select#village").attr("disabled","disabled");
$("select#village").html("<option>wait...</option>");
$("select#village").removeAttr("disabled");
$("select#village").html(data);
}); }); //You have missed this one
In the code aboove you have add something which isn't good change this one:
$("select#district option:selected").change(function(){
to this:
$("select#district").change(function(){
Related
This is the first time that I’m working with oracle. I’m kind of stuck at printing the values of the second dropdown on the page. I’m getting the right results in the browser’s response tab but I’m not sure why it is not getting printed on the main page. Upon selecting a value in the first dropdown, it should print the names in the second one.
Here's my code:
form.php
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div id="addroles" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="resultRoleContent"></div>
</div>
<form class="cmxform" action ='functions/processform.php' id="Form1" method="post">
<legend> Faculty Transaction Form</legend>
<label for="addname">Please Select School</label>
<select class="form-control" name="school" id="school">
<?php
$nameslist = $getschool->getSchool();
oci_execute($nameslist, OCI_DEFAULT);
while ($row = oci_fetch_array($nameslist, OCI_ASSOC+OCI_RETURN_NULLS)) {
echo '<option value="' . $row['SCHOOLNAME'] . '">' . $row['SCHOOLNAME']. '</option>';
}
?>
</select>
<label for="names">Please Select Name</label>
<select class="form-control" name="names" id="names">
<option value='0' >Select Name</option>
</select>
</form>
</div>
</div>
<script>
$(document).ready(function(){
$('#school').change(function(){
var schoolname = $(this).val();
$('#names').find('option').not(':first').remove();
// AJAX request
$.ajax({
url: 'getUsers.php',
type: 'post',
data: {request: 1, primaryschool: schoolname},
dataType: 'json',
success: function(response){
var len = response.length;
for( var i = 0; i<len; i++){
var firstname = response[i]['FIRSTNAME'];
$("#names").append("<option value='"+firstname+"'>"+firstname+"</option>");
}
}
});
});
});
</script>
getUsers.php
<?php
$dbUser = "xxxx";
$dbPass = "xxxx";
$dbConn = "(DESCRIPTION = (ADDRESS = (PROTOCOL=TCP)(HOST=xxxx)(PORT=1521))(CONNECT_DATA=(SID=xxxx)))";
$conn = oci_connect($dbUser, $dbPass, $dbConn);
$request = 0;
if(isset($_POST['request'])){
$request = $_POST['request'];
}
if($request == 1){
$schoolpropername = $_POST['primaryschool'];
$sql =oci_parse($conn,"SELECT * FROM person Where primaryschool = :primaryschool Order by firstname");
oci_bind_by_name($sql, ':primaryschool', $schoolname);
oci_execute($sql);
?>
<select class="form-control" name="names" id="names">
<?php
while($result = oci_fetch_array($sql, OCI_ASSOC+OCI_RETURN_NULLS)){
echo '<option value="' . $result['FIRSTNAME'] . '">' . $result['FIRSTNAME']. '</option>';
}
}
?>
</select>
I'm getting the right results in the browsers response tab. It is only not getting printed on the web page. There's no error in the error_log. I referred to a few similar questions as well but didn't get the answer hence posted it.
Try to change this:
SCRIPT
<script>
$(document).ready(function(){
$('#school').change(function(){
var schoolname = $(this).val();
$('#names').find('option').not(':first').remove();
// AJAX request
$.ajax({
url: 'getUsers.php',
type: 'post',
data: {request: 1, primaryschool: schoolname},
success: function(response){
$("select#names").html('<option value="0">Select Name</option>');
$("select#names").append(response);
}
});
});
});
</script>
getUsers.php
<?php
$dbUser = "xxxx";
$dbPass = "xxxx";
$dbConn = "(DESCRIPTION = (ADDRESS = (PROTOCOL=TCP)(HOST=xxxx)(PORT=1521))(CONNECT_DATA=(SID=utf8devl)))";
$conn = oci_connect($dbUser, $dbPass, $dbConn);
$request = 0;
if(isset($_POST['request'])){
$request = $_POST['request'];
}
if($request == 1){
$schoolpropername = $_POST['primaryschool'];
$sql =oci_parse($conn,"SELECT * FROM person Where primaryschool = :primaryschool Order by firstname");
oci_bind_by_name($sql, ':primaryschool', $schoolname);
oci_execute($sql);
$response = '';
while($result = oci_fetch_array($sql, OCI_ASSOC+OCI_RETURN_NULLS)){
$response .= '<option value="' . $result['FIRSTNAME'] . '">' . $result['FIRSTNAME']. '</option>' . PHP_EOL;
}
echo $response;
}
Also this can be done using JSON response:
getUsers.php
...
$response = [];
while($result = oci_fetch_array($sql, OCI_ASSOC+OCI_RETURN_NULLS)){
$response[] = $result['FIRSTNAME'];
}
echo json_encode($response);
...
Jquery
...
$.ajax({
url: 'getUsers.php',
type: 'post',
data: {request: 1, primaryschool: schoolname},
dataType: 'json',
success: function(response){
$("select#names").html('<option value="0">Select Name</option>');
var arr = jQuery.parseJSON(response);
$.each( arr, function( key, value ) {
$("select#names").append('<option value="'+ value +'">'+ value +'</option>');
});
}
});
...
UPDATE
Here is the confirmation produced on my localhost:
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#school').change(function(){
var schoolname = $(this).val();
$('#names').find('option').not(':first').remove();
// AJAX request
$.ajax({
url: 'resourse.php',
type: 'post',
data: {request: 1, primaryschool: schoolname},
success: function(response){
$("select#depend").html('<option value="0">Select Name</option>');
$("select#depend").append(response);
}
});
});
});
</script>
</head>
<body>
<select id="school">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="depend">
</select>
</body>
</html>
resourse.php
<?php
$array = [
"Alex",
"Peter",
"Sara"
];
$out = '';
foreach ($array as $val){
$out .= '<option value="' . $val . '">' . $val. '</option>' . PHP_EOL;
}
echo $out;
The above example work as expected.
I have made a simple php and jquery based program. In which when a page is open then I want to show all category data first and All is selected. And then when change category by dropdown then data will be display according to selected Category.
But using this change function of jquery how to do that.
Two files:
index.php file
<?php
$db = mysql_connect('localhost', 'root', 'root') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$result = mysql_query("SELECT * from category");
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#select_category").change(function(){
var catid = $("#select_category option:selected").val();
$.ajax({
type : "post",
url : "product.php",
data: { id:catid },
success: function (response) {
var getres = $.parseJSON(response);
var results = "";
results += "<table border='1'>";
results += "<tr>"+
"<th>Product Name</th>"+
"<th>Category</th>"+
"<th>Publish</th>"+
"</tr>";
$.each(getres.data , function (key,value){
results += "<tr><td>" + value.product_name + "</td><td>" + value.publish + "</td><td>" + value.category + "</td></tr>";
});
results+= "</table>";
$(".result-container").html(results);
}
});
});
});
</script>
</head>
<body>
<select name="cat" id="select_category">
<option value="0">--All--</option>
<?php
while ($row = mysql_fetch_array($result)) { ?>
<option value="<?php echo $row['cat_id'] ?>"><?php echo $row['cat_name'] ?></option>
<?php } ?>
</select><br><br><br>
<div class="result-container">
</div>
</body>
</html>
product.php file
$db = mysql_connect('localhost', 'root', 'root') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$cat_id = $_POST['id'];
$query = "SELECT p.name AS product_name,CASE WHEN p.publish='yes' THEN '+' ELSE '-' END AS publish,c.cat_name AS categoryFROM product p LEFT JOIN category c ON c.cat_id = p.category";
if(!empty($cat_id)){
$query = $query. 'WHERE p.category='.$cat_id;
}
$sql = mysql_query($query);
$rows = array();
while($r = mysql_fetch_assoc($sql)) {
$rows[] = $r;
}
$result=array('data'=>$rows);
echo json_encode($result);
You can do that by calling same ajax code on page load with empty category id.
<?php
$db = mysql_connect('localhost', 'root', 'testing') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$result = mysql_query("SELECT * from category");
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function ajaxCall(catid = '') {
$.ajax({
type: "post",
url: "product.php",
data: { id: catid },
success: function(response) {
var getres = $.parseJSON(response);
var results = "";
results += "<table border='1'>";
results += "<tr>" +
"<th>Product Name</th>" +
"<th>Category</th>" +
"<th>Publish</th>" +
"</tr>";
$.each(getres.data, function(key, value) {
results += "<tr><td>" + value.product_name + "</td><td>" + value.publish + "</td><td>" + value.category + "</td></tr>";
});
results += "</table>";
$(".result-container").html(results);
}
});
}
$(document).ready(function() {
ajaxCall();
$("#select_category").change(function() {
var catid = $("#select_category option:selected").val();
ajaxCall(catid);
});
});
</script>
</head>
<body>
<select name="cat" id="select_category">
<option value="0">--All--</option>
<?php
while ($row = mysql_fetch_array($result)) {?>
<option value="<?php echo $row['cat_id']; ?>">
<?php echo $row['cat_name']; ?>
</option>
<?php } ?>
</select>
<br>
<br>
<br>
<div class="result-container"></div>
</body>
</html>
Here is my code, which is having a problem displaying the values of the second:
HTML: my form, the first drop down I get the elements from the database with query.
<form name="farmer" action="index.php" method="post">
<label>
<span>Chose Land:</span>
<select name="land" id="land">
<option value="">--land--</option>
<?php
$sql="SELECT `city` FROM `lands`";
$result =mysql_query($sql);
while ($data=mysql_fetch_assoc($result)){
?>
<option value ="<?php echo $data['city'] ?>" ><?php echo $data['city'] ?></option>
<?php } ?>
</select>
</label>
<label>
<span>Region:</span>
<select name="region" id="region">
<option value="">--region--</option>
</select>
</label>
<input class="button4" type="submit" name="submit" value="Submit" />
</form>
JS
jQuery(document).ready(function() {
jQuery('#land').change(function() {
jQuery.post(
'getList.json.php', {
'land': jQuery('#land').val()
},
function(data, textStatus) {
jQuery('#region').empty();
if(data != null)
{
jQuery.each(data, function(index, value) {
jQuery('#region').append('<option value="' + value + '">' + value + '</option>');
});
}
else {
jQuery('#region').append('<option value="">Please select...</option>');
}
},
'json'
);
});
});
getList.json.php file - Here I make connection between region and land with query(JOIN).
<?php
mysql_connect("localhost", "root", "") or die( "Unable to connect to database");
mysql_select_db("farmer_fields") or die( "Unable to select database");
if($_POST && $_POST['land'] != "") {
$sql="SELECT region FROM regions
LEFT JOIN lands
ON regions.id_lands = lands.id";
$rows = array();
while ($data=mysql_fetch_assoc($sql)){
$rows['region'] = $data;
}
echo json_encode( $rows );
}
?>
No need of json here. You can simply do with jquery and ajax
jquery:
function get_region(country_id) {
if (country_id != 0) {
$("#region_id").html("<option value='0'>Select Region</option>");
$("#region_id").prop("disabled", true);
$.post("ajax/ajax.php", {
country_id: country_id
}, function (data) {
var data_array = data.split(";");
var number_of_name = data_array.length - 1;
var value;
var text;
var opt;
var temp_array;
for (var i = 0; i < number_of_name; i++) {
temp_array = data_array[i].split(",");
value = temp_array[1];
//alert(value);
text = temp_array[0];
opt = new Option(text, value);
$('#region_id').append(opt);
$(opt).text(text);
}
$("#region_id").prop("disabled", false);
});
} else {
$("#region_id").html("<option value='0'>Select Region</option>");
$("#region_id").prop("disabled", true);
}
}
ajax file that is ajax.php
if (isset($_POST["country_id"])) {
$country_id = $_POST["country_id"];
$region_select = mysql_query("select * from region where country_id='$country_id'");
$region = "";
$region_id = "";
while ($region_row = mysql_fetch_array($region_select)) {
$region = $region.$region_row["region"].
",".$region_id.$region_row["id"].
";";
}
echo $region;
}
HTML OF REGION SELECT BOX:
<select name="region_id" id="region_id" disabled="disabled">
<option value="0">Select Region</option>
</select>
You may change mysql_query to PDO for security purpose as mysql_query is depriciated.
Check this, works for me.
JS:
jQuery(document).ready(function() {
var region = jQuery('#region');
var land = jQuery('#land').change(function() {
jQuery.post(
'getList.json.php', {
'land': land.val()
},
function(data) {
jQuery('#region').empty();
if (data != null) {
region.append(data);
}
else {
region.append('<option value="">Please select...</option>');
}
},
'html'
);
});
});
PHP:
if($_POST && $_POST['land'] != "") {
$sql="SELECT region
FROM regions r
LEFT JOIN lands l ON r.id_lands = l.id
WHERE l.city = " . $_POST['land'];
$result = mysql_query($sql); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< UPD!
while ($data = mysql_fetch_assoc($result)) {
echo '<option value="' . $data['region'] . '">' . $data['region'] . '</option>';
}
}
i am creating 2 dynamic drop list that the second one is based on the selection of the first but the problem is that the second one do not populate and i do not know where is the error can anyone help me ????
dbconfig.php
<?php
$host = "localhost";
$user = "*****";
$password = "****";
$db = "lam_el_chamel_db";
?>
select.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#district").attr("disabled","disabled");
$("select#governorate").change(function(){
$("select#district").attr("disabled","disabled");
$("select#district").html("<option>wait...</option>");
var id = $("select#governorate option:selected").attr('value');
$.post("select_district.php", {id:id}, function(data){
$("select#district").removeAttr("disabled");
$("select#district").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#governorate option:selected").attr('value');
var type = $("select#district option:selected").attr('value');
if(cat>0 && type>0)
{
var result = $("select#district option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="select_form">
Choose a governorate:<br />
<select id="governorate">
<?php echo $opt->ShowGovernorate(); ?>
</select>
<br /><br />
choose a district:<br />
<select id="type">
<option value="0">choose...</option>
</select>
<br /><br />
<input type="submit" value="confirm" />
</form>
<div id="result"></div>
</body>
</html>
select class.php
<?php
class SelectList
{
protected $conn;
public function __construct()
{
$this->DbConnect();
}
protected function DbConnect()
{
include "dbconfig.php";
$this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
mysql_select_db($db,$this->conn) OR die("can not select the database $db");
return TRUE;
}
public function ShowGovernorate()
{
$sql = "SELECT * FROM governorate";
$res = mysql_query($sql,$this->conn);
$governorate = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$governorate .= '<option value="' . $row['governorate_id'] . '">' . $row['governorate_name'] . '</option>';
}
return $governorate;
}
public function ShowDistrict()
{
$sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]";
$res = mysql_query($sql,$this->conn);
$district = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>';
}
return $district;
}
}
$opt = new SelectList();
?>
select _type.php
<?php
include "select.class.php";
echo $opt->ShowDistrict();
?>
table structure
governorate :
governorate_id
governorate_name
districts:
district_id,
district_name,
governorate_id.
On select.php Page you used id for select tag is 'id="type"' which would be 'id = "district"' in select tag for choose a district : below text.
choose a district:<br />
<select id="type">
<option value="0">choose...</option>
</select>
By Below
choose a district:<br />
<select id="district">
<option value="0">choose...</option>
</select>
Rename page 'select_type.php' by 'select_district.php' Or do change in $.post ajax query. correct sending request page name by 'select_type.php'.
This should be changed in
from $sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]";
to $sql = "SELECT * FROM districts WHERE governorate_id=$_POST['governorate']";
also in select.php change
<select id='governorate'> to <select id='governorate' name='governorate'>
i am creating dynamic drop list using php mysql + ajax jquery that the populate of second drop list is based on the selection of the first and third is based on the selection of the second but it did not work can anyone help me ???
dbconfig.php
<?php
$host = "localhost";
$user = "****";
$password = "***";
$db = "lam_el_chamel_db";
?>
select.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#district").attr("disabled","disabled");
$("select#village").attr("disabled","disabled");
$("select#governorate").change(function(){
$("select#district").attr("disabled","disabled");
$("select#district").html("<option>wait...</option>");
$("select#village").attr("disabled","disabled");
$("select#village").html("<option>wait...</option>");
var id = $("select#governorate option:selected").attr('value');
$.post("select_district.php", {id:id}, function(data){
$("select#district").removeAttr("disabled");
$("select#district").html(data);
});
var id2 = $("select#district option:selected").attr('value');
$.post("select_village.php", {id:id}, function(data){
$("select#village").removeAttr("disabled");
$("select#village").html(data);
});
$("form#select_form").submit(function(){
var gover = $("select#governorate option:selected").attr('value');
var dist = $("select#district option:selected").attr('value');
if(gover>0 && dist>0)
{
var result = $("select#district option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
if(dist>0 && village>0)
{
var result = $("select#village option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose three options!");
}
return false;
});
});
</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="select_form">
Choose a governorate:<br />
<select id="governorate">
<?php echo $opt->ShowGovernorate(); ?>
</select>
<br /><br />
choose a district:<br />
<select id="district">
<option value="0">choose...</option>
</select>
<br /><br />
choose a village:<br />
<select id="village">
<option value="0">choose...</option>
</select>
<input type="submit" value="confirm" />
</form>
<div id="result"></div>
</body>
</html>
select_class.php
<?php
class SelectList
{
protected $conn;
public function __construct()
{
$this->DbConnect();
}
protected function DbConnect()
{
include "dbconfig.php";
$this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
mysql_select_db($db,$this->conn) OR die("can not select the database $db");
return TRUE;
}
public function ShowGovernorate()
{
$sql = "SELECT * FROM governorate";
$res = mysql_query($sql,$this->conn);
$governorate = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$governorate .= '<option value="' . $row['governorate_id'] . '">' . $row['governorate_name'] . '</option>';
}
return $governorate;
}
public function ShowDistrict()
{
$sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]";
$res = mysql_query($sql,$this->conn);
var_dump($res);
$district = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>';
}
return $district;
}
public function ShowVillage()
{
$sql = "SELECT village_id, village_name FROM village WHERE district_id=$_POST[id2]";
$res = mysql_query($sql,$this->conn);
$village = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$village .='<option value="' .$row['village_id'] . '">' . $row['village_name'] . '</option>';
}
return $village;
}
}
$opt = new SelectList();
?>
select_district.php
<?php
include "select.class.php";
echo $opt->ShowDistrict();
?>
select_village.php
<?php
include "select.class.php";
echo $opt->ShowVillage();
?>
i think it has something within the select.php but i did not know what is the error
Your ajax call is done on the document.ready function. You should bind the ajax to the dropdown change function like:
$("select#district option:selected").change(function(){
id = $(this).val();
$.post("select_village.php", {id:id}, function(data){
$("select#village").removeAttr("disabled");
$("select#village").html(data);
});
Hope that helps