How to add slider in the JSON AJAX request from HTML

Question

I've got 2 tables that are storing movie ID, posters and run-times from SKYTV and NOWTV. They hold and ID number and a poster path. When the NOWTV checkbox is clicked, NOWTV movies show. When SkyTV is clicked, SKYTV movies show.

I also have a range slider, which represents the maximum run time.

I have 2 pages (see below) - submit.php and ajax.html

Problem:

On the HTML page, there is a slider. When the user moves the slider, I'd like this to represent a change in the maximum amount of runtime allowed on the return. Runtime is stored within both tables.

The slider within the ajax.html is:

<script>
var slider = document.getElementById("runtime");
var output = document.getElementById("runtime_");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

The slider is as:

<div class="slidecontainer">
<input type="range" min="1" max="360" value="120" class="slider" id="runtime">
<p>Runtime: <span id="runtime_"></span></p>

This is the script within the ajax.html that creates the table and returns the HTML values to send to submit.php. Please excuse that the functions say "employees", I was following a tutorial.

<script>
  function makeTable(data){
    var tbl_body = "";
    for (var i = 0; i < data.length; i++)  {
      var tbl_row = "";
      var t = i;
      for (var j=0; j<2; j++) {
      //tbl_row +=("<td>" + data[i].tmdbid + "</td>");
        tbl_row +=("<td><IMG SRC='my link goes here"+ data[i].poster +"'></td>");
        i++;
      }
      tbl_body += "<tr>"+tbl_row+"</tr>" 
    }
    return tbl_body;
  }
  function getEmployeeFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.name);
      }
    });
    var slider = document.getElementById("runtime");
    opts.push(slider.value);
    return opts;
  }
  function updateEmployees(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {
        filterOpts: opts
      },
      success: function(records){
        $('#employees tbody').html(makeTable(records));
      }
    });
  }
  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getEmployeeFilterOptions();
    updateEmployees(opts);
  });
  updateEmployees();
</script>

My submit page then creates SQL based on the return, for the slider I currently have:

if (in_array("runtime", $opts)) {
  $where .= ' AND runtime < VALUE OF THE SLIDER?????';
}

The expected result is that the movement of the slider will change the SQL return for WHERE runtime < value of the slider.

Answer 1

In your code, the range input's value is sent in one array with the checkbox names, so with more numeric data it would be difficult to tell which value is the one we need for the SQL query. The data from the inputs can be sent in a more associative way:

function getEmployeeFilterOptions(){
// here we're creating an object instead of an array
  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));
    }
  });
}
// we'll sent an event listener for all inputs so the updateEmployees function will be invoked also after the slider is moved
var $checkboxes = $("input");
$checkboxes.on("change", function(){
  var opts = getEmployeeFilterOptions();
  updateEmployees(opts);
});

This way the data passed in the AJAX request will look like that:

{checkboxes: Array(1), sliderValue: "120"}

Then, on the back-end you will be able to modify your SQL query like so:

$checkboxes = $_POST["checkboxes"];
$slider_value = $_POST["sliderValue"];
if (in_array("runtime", $checkboxes)) {
    $where .= ' AND runtime < '  . $slider_value;
}

With the range input value being set to, for example 273 , the $where variable will hold:

AND runtime < 273