Why isn't my AJAX loading onto my webpage? - php

Question

I've set up JavaScript and AJAX that's supposed to fetch data from a database subject to a set of filters, and return a table of results that match those filters. I thought I had the code set up correctly, but when I submit the search filter form, the page reloads and nothing else happens. I can't work out where I'm going wrong!
connection.php is just a file containing my database details/username/password, and I know that's working correctly. I've scoured through for syntax errors and can't find any, so it must be something to do with the way I've written my code. However, I'm very new to all this so am really struggling to see what exactly I've done wrong. Any help would be hugely appreciated!
my javascript:
function showStock(search, genre, publisher, minyear, maxyear) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("results").innerHTML = this.responseText;
}
xmlhttp.open("GET", "stock.php?search=" + search + "&genre=" + genre + "&publisher=" + publisher +
"&min-year=" + min - year + "&max-year=" + max - year, true);
xmlhttp.send();
}
}
my filter form:
<form id="filters">
<label> Search by Title:</label><br>
<input type="search" name="search">
<label>Genre:</label><br>
<select name='genre'>
<option value='All'> All </option>
<?php
function dropdownOptions($category) {
require('connection.php');
$sql = "SELECT DISTINCT ".$category." FROM stock";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()) {
echo "<option value='" . $row[$category] . "'>" . $row[$category] . "</option>";
}
}
dropdownOptions("genre");
?>
</select>
<label>Publisher:</label><br>
<select name="publisher">
<option value="all"> All</option>
<?php
dropdownOptions("publisher");
?>
</select>
<div class="year">
<label>Release Year:</label><br>
<input type="number" name="min-year" min="1970" max="2018">
<label> to </label>
<input type="number" name="max-year" min="1970" max="2018">
</div>
<div class="buttons">
<button type="submit" onclick="showStock(search, genre, publisher, min-year, max-year)">SEARCH</button>
<button type="reset">CLEAR</button>
</div>
</form>
my stock.php code:
<?php
require('connection.php');
$search = $_GET['search'];
$publisher = $_GET['publisher'];
$genre = $_GET['genre'];
$minyear = intval($_GET['min-year']);
$maxyear = intval($_GET['max-year']);
if ($search == "") {
$searchQ = "";
} else {
$searchQ = "AND CONTAINS(title, $title) ";
}
if ($genre == "all") {
$genreQ = "";
} else {
$genreQ = "AND genre = $genre ";
}
if ($publisher == "all") {
$publisherQ = "";
} else {
$publisherQ = "AND publisher = $publisher ";
}
if ($minyear == "" && $maxyear == "") {
$yearQ = "";
} else if ($minyear == "" && $maxyear != "") {
$yearQ = "AND release_date <= $maxyear ";
} else if($minyear != "" && $maxyear == "") {
$yearQ = "AND release_date >= $minyear ";
} else if ($minyear != "" && $maxyear != ""){
$yearQ = "AND release_date BETWEEN $minyear AND $maxyear ";
}
$sql = "SELECT * FROM stock WHERE id > 0".$searchQ.$genreQ.$publisherQ.$yearQ.";";
$result = $conn->query($sql);
echo "<table>
<tr>
<th>ID</th>
<th>Title</th>
<th>Publisher</th>
<th>Genre</th>
<th>Price</th>
<th>Release Year</th>
<th>Stock Units</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['title'] . "</td>";
echo "<td>" . $row['publisher'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['genre'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "<td>" . $row['release_date'] . "</td>";
echo "<td>" . $row['stock_units'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
I expected a table of relevant results to load on my webpage (hosted on my uni server here: https://students.emps.ex.ac.uk/admt201/webdev/stock-lookup.php), but instead all that happens is that my search parameters are added to the url of the original webpage and nothing new loads.

Answer 1

This is not an answer, but a long comment with multiple suggestions.
A problem of this nature is best attacked by breaking it down and confirming each part. Since PHP is notoriously difficult to troubleshoot (since if there is an error it doesn't generate any helpful message it just abends) I suggest you tackle the PHP side first.
So, make a copy of your stock.php file and replace the $_GET[] variable assignments with some hard-coded data. Then, make sure it outputs success messages (to ensure you are receiving the data you expected) and run that modified stock.php file as a stand-alone. You first need to confirm that the PHP is working, because if it isn't you can troubleshoot the javascript side till the cows come home and true happiness will continue to elude you.
Another troubleshooting methodology that is useful when troubleshooting PHP is to simply add a number of file writes throughout the file, like this:
$hF = fopen("__debug.log", "a");
//run a couple lines of code
fwrite($hF, "Got to here 01");
//run a few more lines of code
fwrite($hF, "Got to here 02");
//repeat...
Then, check the created __debug.log file and see if you got all of the expected file writes, or if the code died somewhere along the way. Otherwise, how would you know?
Note that there is an extension for Chrome called PHPConsole that allows you to output console messages to the browser, but it can be a bit tricky to get working off the start -- whereas the above fwrite() method is rock-solid-reliable and easily implemented.
Similarly, on the javascript side, salt your code with a bunch of console.log() statements to identify where the problems are manifesting.