change of drop down in php my sql Dynamically - php

Question

I have two drop downs .one have static value and second get values from db. I want to that if value is selected from 1st drop down then relevant values loaded in 2nd drop down. I have tried. but its load all the data from database according to user.for example when user select from request type dropdown having value inquiry.then 2nd drop down load only the values which have catType Inquiry.and if he select the complaint then complaint data must be shown.I have been tried but all the data is loaded ,or only one data is loading.any body help me in this regard.Thanks in Advance. Here is My Code
<div class="col-md-4">
<div class="form-group">
<label for="requesttype"><?php echo $requestField; ?></label>
<select class="form-control" required="" id="requesttype" name="requesttype" onchange="fcrActionChange(this);">
<option value="">Select Request Type</option>
<option value="Inquiry">Inquiry</option>
<option value="Complaint">Complaint</option>
<option value="Service Request/FCR">Service Request/FCR</option>
<option value="Verification Call">Verification Call</option>
</select>
<span class="help-block"><?php echo $requestHelp; ?></span>
</div>
</div>
$("#requesttype").change(function() {
$("#catId).load("navigation.php?requesttype=" + $("#requesttype").val());
});
</script>
<div class="col-md-4">
<div class="form-group">
<label for="catId"><?php echo $categoryField; ?></label>
<select class="form-control" name="catId" id="catId">
$tcat = "SELECT catId, catName FROM categories WHERE userId = ".$userId." AND isActive = 1 AND catType = ".$_GET['requesttype'];
$rest = mysqli_query($mysqli, $tcat) or die('-2'.mysqli_error());
while ($tcatrow = mysqli_fetch_assoc($rest)) {
echo "<option value="$tcatrow['catId'] >";
echo clean($tcatrow['catName'])."</option>";
}
</select>
<span class="help-block"><?php echo $categoryHelp; ?></span>
</div>
</div>
</div>

Answer 1

Your code is pretty confusing but anyway, the important part is within your ajax request and your PHP file
Ex. you have a div id secondOpt to be filled from the query made by the requesttype.
**Note I added a userId input field to pass the value for the SQL query in the navigation.php
<select class="form-control" required="" id="requesttype" name="requesttype" onchange="fcrActionChange(this);">
<option value="">Select Request Type</option>
<option value="Inquiry">Inquiry</option>
<option value="Complaint">Complaint</option>
<option value="Service Request/FCR">Service Request/FCR</option>
<option value="Verification Call">Verification Call</option>
</select>
<input type="hidden" id="userId" value="<?php echo $userId;?>">
<div id="secondOpt"></div>
After this, you will have an ajax request below, you can use $.post from jQuery and render the returned data on the secondOpt element
$('#requesttype').change(function(){
$.post("navigation.php",{requesttype: $(this).val(),userId: $('#userId').val()},function(options)
{
$('#secondOpt').html(options);
});
});
And for the navigation.php UPDATED
//don't forget your config file here to connect with the database
$userId = mysql_real_escape_string($_POST['userId']);
$requesttype = mysql_real_escape_string($_POST['requesttype']);
$output = "<select id='catId'>";
$tcat = "SELECT catId, catName FROM categories WHERE userId = ".$userId." AND isActive = 1 AND catType = ".$requesttype;
$rest = mysqli_query($mysqli, $tcat) or die('-2'.mysqli_error());
while ($tcatrow = mysqli_fetch_assoc($rest)) {
$output.="<option value=".$tcatrow['catId']." >";
$output.=clean($tcatrow['catName'])."</option>";
}
$output.="</select>";
echo $output;