I am trying to create an interdependent drop down list using AJAX and PHP. The problem is that whenever I change the menu in the first drop down list, it does not return the result from the while loop. However, it returns the other statement. To be clear lets discuss this over my codes.
HTML
<tr>
<th class="col-sm-4">Category</th>
<td>
<select id="category" class="form-control">
<?php while($c = $category->fetch()){ extract($c); ?>
<option value="<?php echo $cat_id; ?>"><?php echo $cat_name; ?></option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<th class="col-sm-4">Board</th>
<td>
<select id="board" class="form-control">
<option value="">Select Board</option>
</select>
</td>
</tr>
AJAX
$(document).ready(function() {
$('#category').change(function(){
var dataString = {
category: $('#category').val(),
type: 'loadBoard'
};
if(dataString.category > 0){
$.ajax({
type: 'post',
url: 'processes/settings.php',
data: dataString,
cache: true,
success: function(html){
$('#board').html(html);
}
});
}
});
});
processes/settings.php
$category = (!empty($_POST['category']))?$_POST['category']:null;
$type = (!empty($_POST['type']))?$_POST['type']:null;
if($_POST){
if($type == 'loadBoard'){
$stmt = $pdo->prepare("SELECT brd_id, brd_title FROM forum_boards WHERE brd_cat = :cat");
$stmt-> bindValue(':cat', $category);
$stmt-> execute();
$rc = $stmt->rowCount();
if($rc > 0){
while($row = $stmt->fetch()){ extract($row);
echo "<option value=".$brd_id.">".$brd_name."</option>";
}
}else{
echo $html = "<option value=''>No Board Exists</option>";
}
}
}
Here the problem is that when the condition if($rc > 0){
is false it returns the else
statement properly. That means it returns No Board Exists
properly. But then the condition if($rc > 0){
is true, it does not return the list under the while loop and my select box ends up blank. What is the issue here? Please help.