I have a website for a used car lot that lists all their current inventory on a page by using the following sql: "SELECT * FROM inventory ORDER BY timestamp ASC".
I am trying to use the W3Schools (https://www.w3schools.com/php/php_ajax_database.asp) method of Ajax database manipulation to filter my results when an option of a dropdown menu has been changed.
The javascript and php all runs correctly but the value that is sent and is used in the new sql statement is showing as '0' instead of the value that should be sent.
The values of this dropdown are pulled from the same table to dynamically generate the menu and the values for each should be 'Ford', 'Audi', 'Dodge', etc. Which works fine until it's sent by the javascript.
<select name="filtermake" class="css-dropdowns" tabindex="1" onchange="showMake(this.value)">
<option value="">All Makes</option>
<?php
$sql = "SELECT DISTINCT make FROM inventory ORDER BY make ASC";
$result = mysqli_query($conn, $sql);
while ($row = $result->fetch_assoc()) {
echo '<option value="'.$row['make'].'">'.$row['make'].'</option>';
}
?>
</select>
The JS for the dynamic replacement is:
<script>
function showMake(str) {
if (str == "") {
document.getElementById("inventory").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("inventory").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","includes/inc.inventorymake.php?q="+str,true);
xmlhttp.send();
}
}
</script>
The PHP code that is run by the script is:
<?php
include_once ('inc.dbh.php');
$q = intval($_GET['q']);
$inventorysql = "SELECT * FROM inventory WHERE make = '".$q."'";
$result = mysqli_query($conn, $inventorysql);
while ($row = $result->fetch_assoc()) {
echo '<div id="inventory" class="inventory margin-bottom-20 clearfix scroll_effect fadeIn"><a class="inventory" href="inventory-listing.php?vin=' . $row['vin'] . '"><div class="title">'.$row['year'].' '.$row['make'].' '.$row['model'].'</div><img src="images/inventory/'.$row['vin'].'-main.jpg" class="preview" alt="preview"><table class="options-primary"><tr><td class="option primary">Body Style:</td><td class="spec">'.$row['body'].'</td></tr><tr><td class="option primary">Drivetrain:</td><td class="spec">'.$row['drivetrain'].'</td></tr><tr><td class="option primary">Transmission:</td><td class="spec">'.$row['transmission'].'</td></tr><tr><td class="option primary">Mileage:</td><td class="spec">'.ltrim ($row['mileage'], '0').'</td></tr></table><table class="options-secondary"><tr><td class="option secondary">Exterior Color:</td><td class="spec">'.$row['exteriorcolor'].'</td></tr><tr><td class="option secondary">Interior Color:</td><td class="spec">'.$row['interiorcolor'].'</td></tr><tr><td class="option secondary">VIN Number:</td><td class="spec">'.$row['vin'].'</td></tr></table><div class="price"><b>Price:</b><br><div class="figure">$'.ltrim ($row['price'], '0').'<br></div><div class="tax">Plus Tax, Tag, and Title</div></div><div class="view-details gradient_button"><i class="fa fa-plus-circle"></i> View Details </div><div class="clearfix"></div></a></div>';
}
?>
And finally the div that is replaced by the javascript is:
<div id="inventory">
<?php
$inventorysql = "SELECT * FROM inventory ORDER BY timestamp ASC";
$result = mysqli_query($conn, $inventorysql);
while ($row = $result->fetch_assoc()) {
echo '<div id="inventory" class="inventory margin-bottom-20 clearfix scroll_effect fadeIn"><a class="inventory" href="inventory-listing.php?vin=' . $row['vin'] . '"><div class="title">'.$row['year'].' '.$row['make'].' '.$row['model'].'</div><img src="images/inventory/'.$row['vin'].'-main.jpg" class="preview" alt="preview"><table class="options-primary"><tr><td class="option primary">Body Style:</td><td class="spec">'.$row['body'].'</td></tr><tr><td class="option primary">Drivetrain:</td><td class="spec">'.$row['drivetrain'].'</td></tr><tr><td class="option primary">Transmission:</td><td class="spec">'.$row['transmission'].'</td></tr><tr><td class="option primary">Mileage:</td><td class="spec">'.ltrim ($row['mileage'], '0').'</td></tr></table><table class="options-secondary"><tr><td class="option secondary">Exterior Color:</td><td class="spec">'.$row['exteriorcolor'].'</td></tr><tr><td class="option secondary">Interior Color:</td><td class="spec">'.$row['interiorcolor'].'</td></tr><tr><td class="option secondary">VIN Number:</td><td class="spec">'.$row['vin'].'</td></tr></table><div class="price"><b>Price:</b><br><div class="figure">$'.ltrim ($row['price'], '0').'<br></div><div class="tax">Plus Tax, Tag, and Title</div></div><div class="view-details gradient_button"><i class="fa fa-plus-circle"></i> View Details </div><div class="clearfix"></div></a></div>';
}
?>
</div>
With testing the output of what is sent to the variable $q I get '0' and not 'Audi' or 'Ford' etc. So the sql statement ends up being SELECT * FROM inventory WHERE make = '0' and I need it to be SELECT * FROM inventory WHERE make = 'Audi'
I hope this has been clear enough and I know it's a lot of info to digest for such a seemingly small issue but I know from past experience that too little information given is not only frustrating but takes much more time for proper help.
Thank you.
