Filtering by categories for printing in php

Question

I am reporting where I need to filter data by category. I have two categories in my itr table which are Resident and 4Ps.

This is my code so far. Here I can print all the details of the itr table.

<table>
  <tr>
    <th style = "padding-right:80px;padding-left:150px;">
    <center>Name</center></th>
    <th style = "padding-right:10px;padding-left:15px;"><center>Age</center>
    </th>
    <th style = "padding-right:10px;padding-left:20px;">
    <center>Gender</center></th>
    <th style = "padding-right:30px;padding-left:40px;">
    <center>Purok</center></th>
 </tr>
 <?php
   $query = $conn->query("SELECT * FROM itr LIMIT 30") or 
   die(mysqli_error());
   for($a = 1; $a <= 30; $a++){
     $fetch = $query->fetch_array()
 ?>
<tr>
  <td><?php echo $a.". ".$fetch['firstname']." ".$fetch['firstname']?></td>
  <td><center><?php echo $fetch['age']?></center></td>
  <td><center><?php echo $fetch['gender']?></center></td>
  <td><center><?php echo $fetch['address']?></center></td>
</tr>
<?php
}
$conn->close();
?>

I want to print only those in the 4Ps category using a button like "Filter by category", where I can select the filter by resident or 4P so that I can use only one php file. I do not know how to do that. Please, help:)

this is html for category

<label for = "category">Please select category:</label>
    <select style = "width:22%;" class = "form-control" name = "category" required = "required">
        <option value = "">--Select category--</option>
        <option value = "RESIDENT">RESIDENT</option>
        <option value = "4Ps">4Ps</option>
    </select>
<br />

This is my itr table:

And this is my desired result:

Answer 1

1. You need to place the category selection box inside the form

2. , .

, : -

<form method="POST">

    <label for = "category">Please select category:</label>
    <select style = "width:22%;" class = "form-control" name = "category" required = "required">
        <option value = "">--Select category--</option>
        <option value = "RESIDENT">RESIDENT</option>
        <option value = "4PS">4Ps</option> <!-- changed option value to capitals-->
    </select>
    <input type="submit" name="submit" value="submit">
</form>

<table>
  <tr>
    <th style = "padding-right:80px;padding-left:150px;">
    <center>Name</center></th>
    <th style = "padding-right:10px;padding-left:15px;"><center>Age</center>
    </th>
    <th style = "padding-right:10px;padding-left:20px;">
    <center>Gender</center></th>
    <th style = "padding-right:30px;padding-left:40px;">
    <center>Purok</center></th>
 </tr>
 <?php
   if(isset($_POST['category']) && $_POST['category'] !==''){
    $category = $_POST['category'];
    $query = $conn->query("SELECT * FROM itr where category = '$category' LIMIT 30") or die(mysqli_error());
   }else{
    $query = $conn->query("SELECT * FROM itr LIMIT 30") or die(mysqli_error());
   }
   for($a = 1; $a <= 30; $a++){
     $fetch = $query->fetch_array()
 ?>
<tr>
  <td><?php echo $a.". ".$fetch['firstname']." ".$fetch['firstname']?></td>
  <td><center><?php echo $fetch['age']?></center></td>
  <td><center><?php echo $fetch['gender']?></center></td>
  <td><center><?php echo $fetch['address']?></center></td>
</tr>
<?php
}
$conn->close();
?>

. -. SQL INJECTION. prepared statements

: -

mysqli

PDO

Answer 2

AliveToDie, , .

javascript . tr

<!-- table with id for easy js  -->
<table id="itr_table">

<!-- table headers... -->

<!-- table body -->
<tr class="tr_body tr_<?php echo $fetch['category'] ?>">
  <td><?php echo $a.". ".$fetch['firstname']." ".$fetch['firstname']?></td>
  <td><center><?php echo $fetch['age']?></center></td>
  <td><center><?php echo $fetch['gender']?></center></td>
  <td><center><?php echo $fetch['address']?></center></td>
</tr>


<!-- category select, I added a changelistener -->
<select style = "width:22%;" class = "form-control" name = "category" required = "required" onchange="filterByCategory(this)">
    <option value = "">--Select category--</option>
    <option value = "1">RESIDENT</option> <!-- the value should be the actual id of the category. -->
    <option value = "2">4Ps</option>
</select>

<!-- javascript -->
<script>
filterByCategory(selectElement){
    category = $(selectElement).value();

    //hide all trs
    $('#itr_table .tr_body').hide();

    //show trs with chosen category
    $('#itr_table .tr_'.category).show();
}
</script>

, . , .