title: Updating SQL 'WHERE' based on JSON AJAX checkbox selection
body: <p>I have an AJAX HTML page and a submit PHP page, which sends data from SQL to update HTML on page. </p>
  
  <p>I have a list of films within a PHPMyAdmin MariaDB table. One of the columns is "channel". Channel will either say "NOWTV", "BBC", or "SKYTV". I want the user to be able to select the channel and for this to update. </p>
  
  <p>If I check the array for 1 string - for example: skytv, the SQL pulls the data. However, if I want to change the WHERE clause, based on selection - the filtering does not work. </p>
  
  <p>I've tried ".=where OR" to change the channel selection. </p>
  
  <p>ajax.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;style&gt;
  body {
  padding: 10px;
    }
  h2 {
  margin: 1em 0 0.3em 0;
  color: #343434;
  font-weight: normal;
  font-size: 30px;
  line-height: 40px;
  font-fnuamily: 'Orienta', sans-serif;
  }
  #employees {
  font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
  font-size: 12px;
  background: #fff;
  margin: 10px 10px 0 0;
  border-collapse: collapse;
  text-align: center;
  float: left;
  width: 100%;
  }
  #employees th {
  font-size: 14px;
  font-weight: normal;
  color: #039;
  padding: 4px 4px;
  border-bottom: 1px solid #6678b1;
  }
  #employees td {
  border-bottom: 1px solid #ccc;
  color: #669;
  padding: 8px 10px;
  }
  #employees tbody tr:hover td {
  color: #009;
  }
  
  .slidecontainer {
  width: 50%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 50%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  }
  
  /* Mouse-over effects */
  .slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
  }
  
  .slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #000000; /* Square background */
  cursor: pointer; /* Cursor on hover */
  }
  
  .slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="checkbox" id="nowtv" name="nowtv" &gt;
  &lt;label for="nowtv"&gt;Now TV&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;input type="checkbox" id="skytv" name="skytv" &gt;
  &lt;label for="skytv"&gt;Sky Movies&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;input type="checkbox" id="iplayer" name="iplayer" &gt;
  &lt;label for="iplayer"&gt;BBC iPlayer&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Max Run-Time:&lt;/h2&gt;
  &lt;div class="slidecontainer"&gt;
  &lt;input type="range" min="0" max="200" value="0" class="slider" id="runtime"&gt;
  &lt;p&gt;Runtime: &lt;span id="runtime_"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;table id="employees"&gt;
  
  &lt;tbody&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  var slider = document.getElementById("runtime");
  var output = document.getElementById("runtime_");
  output.innerHTML = slider.value;
  slider.oninput = function() {
  output.innerHTML = this.value;
  }
  /script&gt;
    &lt;/div&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;p id="record_count"&gt;&lt;/p&gt;
  
  &lt;script&gt;
  function makeTable(data){
  var tbl_body = "";
  for (var i = 0; i &lt; data.length; i++) 
  {
  var tbl_row = "";
  var t = i;
  for (var j=0; j&lt;4; j++)
  {
  //tbl_row +=("&lt;td&gt;" + data[i].tmdbid + "&lt;/td&gt;");
  tbl_row +=("&lt;td&gt;&lt;a href='new/" + data[i].tmdbid + "'&gt;&lt;IMG SRC='webaddress"+ data[i].poster +"'&gt;&lt;/a&gt;&lt;/td&gt;");
  i++;
  }
  tbl_body += "&lt;tr&gt;"+tbl_row+"&lt;/tr&gt;" 
  }
  return tbl_body;
  }
  function getEmployeeFilterOptions(){
  var opts = {
  checkboxes: [],
  sliderValue: null
  };
  $checkboxes.each(function(){
  if(this.checked){
  opts.checkboxes.push(this.name);
  }
  });
  var slider = document.getElementById("runtime");
  opts.sliderValue = slider.value;
  return opts;
  }
  function updateEmployees(opts){
  $.ajax({
  type: "POST",
  url: "submit.php",
  dataType : 'json',
  cache: false,
  data: opts,
  success: function(records){
  console.log(records);
  $('#employees tbody').html(makeTable(records));
  }
  });
  }
  
  var $checkboxes = $("input");
  $checkboxes.on("change", function(){
  var opts = getEmployeeFilterOptions();
  updateEmployees(opts);
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>submit.php</p>
  
  <pre><code>&lt;?php
  $pdo = new PDO(
  'mysql:host=xxxxxxxx;dbname=xxxxxxxx', 'xxxxxxxx', 'xxxxxxxx'
  );
  
  $checkboxes = $_POST["checkboxes"];
  $slider_value = $_POST["sliderValue"];
  $select = 'SELECT *';
  $from = ' FROM streaming';
  $where = ' WHERE poster &lt;&gt;"" AND runtime &lt;'  . $slider_value . ' AND channel = "X" ';
  if (in_array("nowtv", $checkboxes))
  {
  $where .= ' OR channel = "NOWTV" ';
  }
  if (in_array("skytv", $checkboxes))
  {
  $where .= ' OR channel = "SKYTV" '; 
  }
  if (in_array("iplayer", $checkboxes))
  {
  $where .= ' OR channel = "BBC" '; 
  }
  $sql = $select . $from . $where;
  $statement = $pdo-&gt;prepare($sql);
  $statement-&gt;execute();
  $results = $statement-&gt;fetchAll(PDO::FETCH_ASSOC);
  $json = json_encode($results);
  echo($json);
  &gt;
  </code></pre>
  
  <p>The output I am expecting is for the user to be able to select the checkboxes and runtime - to then update the films available.</p>
  
  <p>The current output shows nothing. :(</p>