dynamic dropdown fetching data from database not working

Question

I have a table named tblstationerystock having three columns like :-

uin, orderdate, quantity.

There are multiple record on different orderdate against uin .

My table Structure is:-

i have a form in which there are two input drop down (uin and orderdate ) which takes input from table tblstationerystock .

If i select the uin in the first input drop down box i want the second dropdown box should show only those date which belong to that particular uin .

My Problem:-

But the second dropdown shows all the value all the time .

my code for form is

<?php
include('includes/config.php');
?>

<div class="form-group col-md-12">
<label> User Name<span style="color:red;">*</span></label>
<select class="form-control" name="user" id="uin" onchange="fnorderdate()" >
<option value=""> </option>
<?php 
$sql = "SELECT uin from  tblstationerystock group by uin order by uin asc ";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{               ?>  
<option value="<?php echo htmlentities($result->uin);?>"><?php echo htmlentities($result->uin);?></option>
 <?php }} ?>
</select>
</div>


<div class="form-group col-md-12">
<label> User Name<span style="color:red;">*</span></label>
<select class="form-control" name="user" id="orderdate" >
<option value=""> </option>
<?php 
$sql = "SELECT orderdate from  tblstationerystock group by orderdate order by orderdate asc ";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{               ?>  
<option value="<?php echo htmlentities($result->orderdate);?>"><?php echo htmlentities($result->orderdate);?></option>
 <?php }} ?>
</select>
</div>
<script>
function fnorderdate()
{
    uin=$('#uin').val();
    $.ajax({
        method:"post",
        url:"ajax.php"'
        data:{uin:uin},
        
        success:function(result)
        {
            $('#orderdate').html(result);
        
        

}
</script>

my ajax code is

<?php
include('includes/config.php');
if(isset($_POST[uin]))
{
    $uin=$POST['uin'];
    
    $select="select orderdate from tblstationerystock where uin='$uin' ";
    $query=mysqli_query($conn,$select);
    while($data=mysqli_fetch_assoc($query))
    {
        echo "<option value='".$data['orderdate']."'>".$data['orderdate']."</option>
    }
}
    


?>

Answer 1

View Part:-

<?php
include('includes/config.php');
?>
<div class="form-group col-md-12">
<label> UIN<span style="color:red;">*</span></label>
<select class="form-control" name="uin" id="uin" >
<option value="" > </option>
<?php 
$sql = "SELECT uin from  tblstationerystock group by uin order by uin asc";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{  ?>  
<option value="<?php echo htmlentities($result->uin);?>">
<?php echo htmlentities($result->uin);?>
</option>
 <?php }} ?>
</select>
</div>


div class="form-group col-md-12">
<label> ORDER DATE<span style="color:red;">*</span></label>
<select class="form-control" name="orderdate" id="orderdate" >

</select>
</div>

jQuery / AJAX Code:-

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

    $('#uin').on("change",function () {
        var uin = $(this).val();
        $.ajax({
            url: "ajax.php",
            type: "POST",
            data: "uin="+uin,
            success: function (response) {
                console.log(response);
                $("#orderdate").html(response);
            },
        });
    }); 

});

</script>

make a php file name it ajax.php in same directory

and put this code:-

<?php 
include('includes/config.php');
$uin = $_POST['uin'];
echo "<option>Select ORDER DATE</option>";
$sql = "SELECT orderdate from  tblstationerystock WHERE uin=$uin";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{               ?>  
<option value="<?php echo htmlentities($result->orderdate);?>">
<?php echo htmlentities($result->orderdate);?>
</option>
 <?php }}
 ?>