Using HTML checkboxes to dynamically create SQL query within PHP code

Question

I currently have a html / PHP webpage which uses a series of user inputs to query a SQL database and return data for plotting. The user input is driven by html checkboxes, driven by data in the SQL database and created using PHP code. The entire html code is too large to put on here but below is an excerpt of the part I want to ask about...

...

<div id="AccProject" class="w3-hide">

<?php 
  $queryProject = "SELECT DISTINCT ProjID, Project, Sample, Type, Description FROM PROJECTS ORDER BY Project ASC";
  $resultProject = $dbhandle->query($queryProject) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
  while($row=mysqli_fetch_array($resultProject)){
    echo "<input id='".$row['ProjID']."' value='".$row['ProjID']."' name='projID[]' type='checkbox' class='chkbox'>";
    echo "<label title='".$row['Description']."&#13;&#13;Project: ".$row['Project']."&#13;Sample: ".$row['Sample']."&#13;Type: ".$row['Type']."' for='".$row['ProjID']."' class='chkbox-label'> ".$row['Project']." | ".$row['Sample']." | ".$row['Type']."</label>";
  }
?>

</div>

...

You can see that I query the SQL database, return a number of fields and then use PHP to generate a number of checkboxes. Later the in the html, I use javascript to extract the checked / unchecked state of these checkboxes and query the database again to return more data.

What I'd like to do is add a number of pre-filters which will reduce the number of checkboxes visible to the user on the page. For example, if the 'Type' field defines whether the data entry is a 'Cake', 'Biscuit' or 'Pudding', I would like to add some switches which would then amend the SQL query. I've given an example with some pseudo code below.

...

<div id="AccProject" class="w3-hide">

<label class="form-switch"><input type="checkbox" id="filterCake"><i></i> Select Cakes only </label>
<label class="form-switch"><input type="checkbox" id="filterBiscuit"><i></i> Select Biscuits only </label>
<label class="form-switch"><input type="checkbox" id="filterPudding"><i></i> Select Puddings only </label>

<?php 

  if filterCake == True
    $queryProject = "SELECT DISTINCT ProjID, Project, Sample, Type, Description FROM PROJECTS WHERE Type == 'Cake' ORDER BY Project ASC";

  if filterBiscuit == True
    $queryProject = "SELECT DISTINCT ProjID, Project, Sample, Type, Description FROM PROJECTS WHERE Type == 'Biscuit'  ORDER BY Project ASC";

  if filterPudding == True
    $queryProject = "SELECT DISTINCT ProjID, Project, Sample, Type, Description FROM PROJECTS WHERE Type == 'Pudding' ORDER BY Project ASC";


  $resultProject = $dbhandle->query($queryProject) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
  while($row=mysqli_fetch_array($resultProject)){
    echo "<input id='".$row['ProjID']."' value='".$row['ProjID']."' name='projID[]' type='checkbox' class='chkbox'>";
    echo "<label title='".$row['Description']."&#13;&#13;Project: ".$row['Project']."&#13;Sample: ".$row['Sample']."&#13;Type: ".$row['Type']."' for='".$row['ProjID']."' class='chkbox-label'> ".$row['Project']." | ".$row['Sample']." | ".$row['Type']."</label>";
  }
?>

</div>

...

How can I achieve this with my code?

All I need to do is change the SQL query within the PHP code (adding a WHERE clause) based on the state of the cake, biscuit or pudding checkboxes but I've been struggling to see how to do this.

Any help greatly appreciated!

Answer 1

You will have to do it with AJAX and each time the user clicks on a checkbox send the value to a different page and then you can either loop thru the results with PHP in the other page and return it in HTML or return the results and loop thru it with JS on the checkbox page

See a somewhat example:

  $("#formName").on("change", "input:checkbox", function(){ //send $(this).val() with ajax //Assuming you are selecting cakes and //getting back an array with cakes //you are the looping thru the array and gettig populating the html var response = []; var cakes = {}; cakes.description = 'Cake Description 1'; cakes.project = 'Cake Project 1'; response.push(cakes); cakes = {}; cakes.description = 'Cake Description 2'; cakes.project = 'Cake Project 2'; response.push(cakes); var formattedResponse = ''; response.forEach(function(res){ formattedResponse += `This is ${res.description} <br>`}); $('#responseContainer').html(formattedResponse); }); 

 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <form action="" id="formName"> <label class="form-switch"><input type="checkbox" value="cake" id="filterCake"><i></i> Select Cakes only </label> <label class="form-switch"><input type="checkbox" value="biscuits" id="filterBiscuit"><i></i> Select Biscuits only </label> <label class="form-switch"><input type="checkbox" value="puddings" id="filterPudding"><i></i> Select Puddings only </label> </from> <div id="responseContainer"></div> 

Answer 2

yes you can fetch data from database by making a dynamic query. Please try this.

$type = $post['type']; //'Cake','Biscuit','Pudding'

$queryProject = "SELECT DISTINCT ProjID, Project, Sample, Type, Description FROM PROJECTS WHERE Type = '" . $type ."' ORDER BY Project ASC";