I am trying to make a filter for a website for cars. I would like to be able to filter by exterior color. I use exterior to represent my color in the database. My UL puts all color from the database into the box and makes each one a induvial check box. Then I have my page that list of all cars through a SELECT * Statement and then I fetch my results through individual echo statements that are wrap and a div. I Do not want to display my exterior colors name next to each car on this page since I am designing a mobile version and trying to keep it clean. However I have tried to list them as induvial tags and I still get send to a blank page.
<ul class="list-group">
<?php
$sql = "SELECT DISTINCT exterior FROM newcars ORDER BY exterior";
$result = $conn->query($sql);
while($row=$result->fetch_assoc()) {
?>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input product_check" name="" value="<?= $row['exterior']; ?>" id="exterior"><?= $row['exterior']; ?>
</label>
</div>
</li>
<?php
}
?>
</ul>
<div id="test">
<?php
$sql = "SELECT * FROM newcars";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo ("<a href='newcarindex.php?id={$row['id']}'><div class='car'>");
echo '
<tr>
<td>
<img src="data:image\jpeg;base64,'.base64_encode($row['photo']).'"/>
</td>
</tr>
';
echo "<h2 class=car-name>";
echo $row['name'];
echo "</h2>";
echo "<span class=stock>STOCK#";
echo $row['stock'];
echo "</span>";
echo "<h3 class=car-msrp>";
echo $row['msrp'];
echo "</h3>";
echo "</div></a>";
}
} else {
echo "There are no matching results!";
}
?>
</div>
this then leads into my ajax script
<script type="text/javascript">
$(document).ready(function(){
$(".product_check").click(function(){
$("#loader").show();
var action = 'data';
var class = get_filter_text('class');
var body = get_filter_text('body');
var exterior = get_filter_text('exterior');
$.ajax({
url:'action.php',
method:'POST',
data:{action:action,class:class,body:body,exterior:exterior},
success:function(response){
$("#test").html(response);
$("loader").hide();
}
});
});
function get_filter_text(text_id){
var filterData = [];
$('#'+text_id+':checked').each(function(){
filterData.push($(this).val());
});
return filterData;
}
});
</script>
and Finally use a action.php page to connect to my database and filter the results
include 'dbh.php';
if(isset($_POST['action'])) {
$sql = "SELECT * FROM newcars WHERE class !=''";
if(isset($_POST['exterior'])) {
$exterior = implode("','", $_POST['exterior']);
$sql .="AND exterior IN('".$exterior."')";
}
$result = $conn->query($sql);
$output='';
if($result->num_rows>0){
while($row=$result->fetch_assoc()){
$photo = base64_encode($row['photo']);
$output .= "<a href='newcarindex.php?id={$row['id']}'>
<div class='car'>
<tr>
<td>
<img src='data:image\jpeg;base64,{$photo}'/>
</td>
</tr>
<h2 class='car-name'>{$row['name']}</h2>
<span class='stock'>STOCK#{$row['stock']}</span>
<h3 class='car-msrp'>{$row['msrp']}</h3>
</div></a>";
}
echo $output;
}
} else {
echo "There are no comments!";
}
}
?>
The Problem I have is every time i click on a color to filter by my page comes up blank showing no results or errors. What am I doing wrong?
