I have the following code in order to generate a cascading dropdown but for some reason the ajax post is not working. I can get it to populate the state list and when i choose a state i alert to show me the value which is correct, but when it comes time to post to fetch_state.php it seems to post null. Can someone please help me on why its doing that?
Here is the code below
index.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include("connection.php");
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="body">
<div id="dropdowns">
<div id="center" class="cascade">
<?php
$sql = "SELECT DISTINCT state FROM tbl_zip ORDER BY state ASC";
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="state" id = "state">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
<option value="<?php echo $rs["state"]; ?>"><?php echo $rs["state"]; ?></option>
<?php } ?>
</select>
</label>
</div>
<div id="city" class="cascade"></div>
<div id="zip" class="cascade"></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#state").change(function(){
var state = $("select#state option:selected").attr('value');
alert(state);
$("#city").html( "" );
$("#zip").html( "" );
if (state.length > 0 ) {
alert(state.length);
$.ajax({
type: "POST",
url: "fetch_state.php",
data: "state="+state,
cache: false,
beforeSend: function () {
$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#city").html( html );
}
});
}
});
});
</script>
</body>
</html>
fetch_state.php
<?php
include("connection.php");
var_dump($_POST);
$state = trim(mysql_escape_string($_POST["state"]));
$sql = "SELECT DISTINCT city FROM tbl_zip WHERE state = ".$state ." ORDER BY city";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>City:
<select name="city" id="drop2">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs["city"]; ?>"><?php echo $rs["city"]; ?></option>
<?php } ?>
</select>
</label>
<?php
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop2").change(function(){
var state_id = $("select#drop2 option:selected").attr('value');
// alert(state_id);
if (state_id.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_city.php",
data: "city="+city,
cache: false,
beforeSend: function () {
$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#city").html( html );
}
});
} else {
$("#city").html( "" );
}
});
});
</script>
Error i keep receiving
Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean
WHERE state = '".$state ."' ORDERYou need to quote your strings. But really, you should be using prepared statements instead of interpolation.