Search jQuery

jQuery Forum

Using jQuery

liamhowe4..

Question: Filtering with Checkboxes

in Using jQuery • 7 years ago

Good Afternoon,

I am wanting to create my own "product filter system".

Basically I want to be able to click on products to go to the products.php page, this will show all my products on my website. On the left some checkboxes like "Show by Brand" with a list of brands. If you check the box for 1 of the brands, it will edit the list of products to only show products for that brand.

Then another one that shows "capacity". Say I clicked "Apple" for brand, then "32GB" for the capacity. This will then show all apple products with the capacity of 32GB.

I can do this with php, but I don't want a form that will refresh the page, I want it to work without any sort of refreshing. I haven't made my system like this since I figured it would be removed for the new system anyway.

Here's the code that will load all my products to the page:

<?php
$sql = mysql_query("SELECT * FROM `products` ORDER BY `id`)
if($sql){
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$product_name = $row["product_name"];
$price = $row["saleprice"];
$category = $row["category"];
$brand = $row["brand"];
$date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
if($z == 2){
$products .= '</tr><tr>';
$z = 0;
}
$products .= '<td width="102px" valign="top"><a href="product.php?id=' . $id . '"><img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="102" height="102" border="1" /></a></td><td width="200" valign="top"><b>' . $brand . ' ' . $product_name . '</b><br />' . $category . '<br />£' . $price . '<br /><a href="product.php?id=' . $id . '">View Product Details</a></td>';
$z++;
}
$products .= '</tr></table>';
}

I know I would use PHP to create the checkboxes for the filters, but I have no idea how I would make it so when a checkbox is ticked it would filter accordingly.

Regards,

Liam