I need help creating multiple live filters with checkbox using Jquery.
I do not know much about Jquery so been working on a demo to get myself familiar with it. So far i was able to filter mysql results with only one filter check box. I am struggling to get it to work with multiple. I am trying to get this to work with at least 5-6 filters. Here is what i came up with so far.
Database
CREATE TABLE IF NOT EXISTS `vehicles` (
`veh_id` int(25) NOT NULL AUTO_INCREMENT,
`year` varchar(25) NOT NULL,
`make` varchar(75) NOT NULL,
`model` varchar(75) NOT NULL,
`color` varchar(25) NULL,
`price` varchar(25) NOT NULL,
`thumbnail` varchar(75) NOT NULL,
PRIMARY KEY (`veh_id`));
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.makes').on('change',function(){ //on checkboxes check
//sending checkbox value into serialize form
var hi=$('.makes:checked').serialize();
if(hi){
$.ajax({
type: "POST",
cache: false,
url: "carfilter.php",
data:{make:hi},
success: function(response){
document.getElementById('getdata').style.display = "block";
document.getElementById("getdata").innerHTML = response;
$('#result').hide();
}
});
} else {
document.getElementById('getdata').style.display = "none";
$('#result').show();
}
});
});
</script>
<style>
#frm {width:150px; float:left;}
#result{border:2px dotted #ededed;height:auto;width:350px;}
h3{border-bottom:2px solid;}
</style>
</head>
<body>
<div id="frm" >
<form method="POST">
<ul class="filter">
<h4>Filter By Make</h4>
<?php
// connect to database
include 'config/config.php';
include 'config/opendb.php';
$sql="SELECT DISTINCT make FROM vehicles GROUP BY make";
$rs=$conn->query($sql);
$rs->data_seek(0);
while($rows = $rs->fetch_assoc()) {
?>
<label><?php echo $rows['make'];?></label><input type="checkbox" name="makes[]" value="<?php echo $rows['make'];?>" id="<?php echo $rows['make'];?>" class="makes"/><br />
<?php } ?>
</ul>
</form>
</div>
<center>
<div id="result">
<h3>Search Results</h3>
<?php
$sql="SELECT * FROM vehicles";
$rs=$conn->query($sql);
$rs->data_seek(0);
while($rows = $rs->fetch_assoc()) {
?>
<?php echo $rows['make']."<br>"; } ?>
</div>
<div id="getdata" style="border:2px dotted #ededed;height:auto;width:350px;"></div>
</center>
</body>
</html>
carfilter.php
<h3 style="border-bottom:2px solid;">Search Results</h3>
<?php
// connect to database
include 'config/config.php';
include 'config/opendb.php';
if($_POST['make']){
//unserialize to jquery serialize variable value
$brandis=array();
parse_str($_POST['make'],$makeis); //changing string into array
//split 1st array elements
foreach($makeis as $manufacturer){
$manufacturer;
}
$manufacturers=implode("','",$manufacturer); //change into comma separated value to sub array
echo "<br/>";
$sql="SELECT * FROM vehicles WHERE make IN ('$manufacturers')";
$rs=$conn->query($sql);
$rs->data_seek(0);
while($rows = $rs->fetch_assoc()) {
echo $rows['make']."<br>";
}
}
?>
Aucun commentaire:
Enregistrer un commentaire