dropdown box to buttons

hi i have some basic code for now where im trying to sort a huge table and filtering by machine i currently have a dropdown box with the machine names in there rather than the drop down box i was thinking have having the nav bar with buttons then only display the machine that is clicked on how do i go about this?

<?php
include("config.php")
?>

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
    font-family: "Helvetica",sans-serif;
}
#filters{
    margin-left: 10%;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #990A00;
}
</style>

</head>
<nav>
<div id="filters">
    <span>Fetch results by &nbsp;</span>
    <select name="fechval" id="fetchval">
    <option value="" disabled="" selected="">Select Filter</option>
    <option value="toy">toy</option>
    <option value="car">car</option>
    <option value="Education">Education</option>
    <option value="Fashion">Fashion</option>
</select>
</div>
</nav>
<body>





<div class="container">
    <table class="table">
        <thread>
            <tr>
            <th>ref id</th>
            <th>Machine</th>
            <th>Supplier code</th>
            <th>Item</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>Part Number</th>
            <th>Alternative</th>
            <th>Alternative2</th>
            <th>Alternative3</th>
            <th>n/a1</th>
            <th>n/a2</th>
            </tr>
        </thread>
        <tbody>
<?php
    $query = "SELECT * FROM masterlistcsv";
    $r = mysqli_query($con,$query);
    while($row = mysqli_fetch_assoc($r)){

?>
            <tr>
            <td><?php echo $row['ref id']?></td>
                <td><?php echo $row['Machine']?></td>
                <td><?php echo $row['Supplier code']?></td>
                <td><?php echo $row['Item']?></td>
                <td><?php echo $row['Description']?></td>
                <td><?php echo $row['Quantity']?></td>
                <td><?php echo $row['Part Number']?></td>
                <td><?php echo $row['Alternative']?></td>
                <td><?php echo $row['Alternative2']?></td>
                <td><?php echo $row['Alternative3']?></td>
                <td><?php echo $row['n/a1']?></td>
                <td><img src="uploads/<?php echo $row['n/a2']?>" class="img-responsive
            img-thumbnail" width="150"></td>
</tr>
<?php
    }
    ?>
   
</tbody>          
</table>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#fetchval").on('change',function(){
        var value = $(this).val();
 
        $.ajax({ 
            url:"fetch.php",
            type:"POST",
            data:'request=' + value,
            beforeSend:function(){
                $(".container").html("<span>Working...</span>");
            },
            success:function(data){
                $(".container").html(data);
            }
        });
      
        });
    });
    </script>

</body>
</html>

dropdown box to buttons

0 Answers