Filter Dynamic Table using Multiple dropdown

user98916

Is there any way to filter my dynamic table using two dropdown? As for now, I only able to filter using only one dropdown. I cannot seem to find the right way so I'm gonna post my original code that successfully filter using one dropdown (because there are too many error in the latest code using two filter). Hope you can give me suggestions on how to solve this.

view.php

<?php

require "../model/model.php";


$month=$_GET['month'];
$sys = getSys(1)->fetch_assoc();
?>

<body>
            
            <div class="row">
                    <table border="0">
                    <tr><td>
                          <select  required class="form-control" name="month" id="month">
                          <option value="">-- Choose Month--</option>
                          <? echo getDropDownMonth($month) ;?>
                          </select>
                         </td></tr>
            </table>
                    
                        <table width="100%" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th width="5%">No.</th>
                                    <th width="20%">Date</th>
                                    <th width="20%">Stock Code</th>
                                    <th width="20%">Price(RM)/KG</th>
                                    <th width="20%">QUANTITY(KG)</th>
                                    <th width="20%">TOTAL(RM)</th>
                                </tr>
                            </thead>
                                <?
                                    $i=1;
                                    $raw = getRawMaterialListCode($month);
                                    while($list_raw_material = $raw->fetch_assoc()) {
                                ?>
                                    <tr class="odd gradeX">
                                        <td><?php echo $i; ?></td>
                                        <td><?php echo $list_raw_material['date_received']; ?></td>
                                        <td><?php echo $list_raw_material['stock_code'].' - '.$list_raw_material['stock_name']; ?></td>
                                        <td><?php echo $list_raw_material['raw_price']; ?></td>
                                        <td><?php echo $list_raw_material['in_per_kg']; ?></td>  
                                        <td><?php echo $list_raw_material['total_price']; ?></td>  
                                    </tr>
                                <?php $i++; } ?>
                        </table>
    <script>
         $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        }); 
   $("#month").change(function(){
     var selected_month=$(this).val();
     sendType(selected_month);
     });
    });
    function sendType(type)
   {
    window.location.href="view.php?month="+type;
    
  } 
    </script>


</body>

model.php

    function getRawMaterialListCode($month) {
            $conn=db();
            $sql = "
SELECT a.*
     , c.stock_code
     , c.stock_name 
  FROM avsb_raw_material a 
  LEFT 
  JOIN avsb_stock c 
    ON a.stock_code = c.stock_code
 WHERE MONTH(a.date_received) = '$month' 
 ORDER 
    BY a.date_received
";
            $result = $conn->query($sql);
            return $result;
        }

Supposedly I'm trying to add second dropdown as filter here:

              <div class="row">
                        <table border="0">
                        <tr><td>
                              <select  required class="form-control" name="month" id="month">
                              <option value="">-- Choose Month--</option>
                              <? echo getDropDownMonth($month) ;?>
                              </select>

                              **<select  required class="form-control" name="stock_code" id="stock_code">
                              <option value="">-- Choose Stock--</option>
                              <? echo getDropDownStock($stock_code) ;?>
                              </select>**

                             </td></tr>
                </table>

and the new model.php

function getRawMaterialListCode($month,$stock_code) {
        $conn=db();
        $sql = "
SELECT a.*
     , c.stock_code
     , c.stock_name 
  FROM avsb_raw_material a 
  LEFT 
  JOIN avsb_stock c 
    ON a.stock_code = c.stock_code 
 WHERE MONTH(a.date_received) = '$month'
   AND a.stock_code = '$stock_code' 
 ORDER 
    BY a.date_received
";
        $result = $conn->query($sql);
        
        return $result;
    }

Thanks in advance.

EDIT: These code are the closest one I try that did not have any error but the data still not display when filtering using two dropdown. The url that i get :

http://localhost/stockcontrolsystem/view/view.php?month=10&stock_code=[object%20HTMLSelectElement]

view:

<?
  $i=1;
  $raw = getRawMaterialListCode($stock_code,$month);
  while($list_raw_material = $raw->fetch_assoc()) {
?>

function:

$(document).ready(function() {
                $("#month").change(function(){

                    var selected_month=$(this).val();
                    reloadMonth(selected_month);
                });
                $("#stock_code").change(function(){
                    if($("#month").val()==''){
                        alert('SELECT MONTH!');
                        $("#stock_code").val('');
                    }else{
                        var selected_stock=$(this).val();
                        var month = $("#month").val();
                        reloadStock(selected_stock,month);}
                });
            });
            function reloadMonth(month){
                //console.log(month);
                location.href = "view.php?month="+month;
            }
            function reloadStock(selected_stock,month){
                //console.log(obj);
                location.href = "view.php?month="+month+"&stock_code="+stock_code;
            }
user98916

ANSWERED! I try inserting what i found here and there and I finally SOLVED it.

$(document).ready(function() {
                $("#month").change(function(){

                    var selected_month=$(this).val();
                    reloadMonth(selected_month);
                });
                $("#stock_code").change(function(){
                    if($("#month").val()==''){
                        alert('SELECT MONTH!');
                        $("#stock_code").val('');
                    }else{
                        var selected_stock=$(this).val();
                        var month = $("#month").val();
                        reloadStock(selected_stock,month);}
                });
            });
            function reloadMonth(month){
                //console.log(month);
                location.href = "view.php?month="+month;
            }
            function reloadStock(selected_stock,month){
                //console.log(obj);
                location.href = "view.php?month="+month+"&stock_code="+selected_stock;
            }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related