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.