Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
C# Corner Home
Technologies
MonthlyLeaders
ASK A QUESTION
Forumguidelines
dip vyas
1.8k
221
15.2k
ajax product filter with checkbox convert to radio button
Jul 31 2019 12:51 AM
i have ajax product filter with checkbox.but i want it with radio button.
below is my code
<?php
//index.php
include
(
'connect.php'
);
?>
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"utf-8"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<meta name=
"description"
content=
""
>
<meta name=
"author"
content=
""
>
<title>Product filter in php</title>
<!--<script src=
"js/jquery-1.10.2.min.js"
></script>
<script src=
"js/jquery-ui.js"
></script>
<script src=
"js/bootstrap.min.js"
></script>-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"
></script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"
></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
<!-- <link rel=
"stylesheet"
href=
"css/bootstrap.min.css"
>
<link href =
"css/jquery-ui.css"
rel =
"stylesheet"
>
<link href=
"css/style.css"
rel=
"stylesheet"
>-->
<link rel=
"stylesheet"
href=
"https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<link rel=
"stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
</head>
<body>
<!-- Page Content -->
<div
class
=
"container"
>
<div
class
=
"row"
>
<br />
<h2 align=
"center"
>Advance Ajax Product Filters in PHP</h2>
<br />
<div
class
=
"col-md-3"
>
<div
class
=
"list-group"
>
<h3>Price</h3>
<input type=
"hidden"
id=
"hidden_minimum_price"
value=
"3000"
/>
<input type=
"hidden"
id=
"hidden_maximum_price"
value=
"6000"
/>
<p id=
"price_show"
>3000 - 6000</p>
<div id=
"price_range"
></div>
</div>
<div
class
=
"list-group"
>
<h3>Brand</h3>
<div style=
"height: 180px; overflow-y: auto; overflow-x: hidden;"
>
<?php
$query
=
"SELECT DISTINCT(name) FROM tbl_product WHERE product_status = '0' ORDER BY id DESC"
;
$statement
=
$connect
->prepare(
$query
);
$statement
->execute();
$result
=
$statement
->fetchAll();
foreach
(
$result
as
$row
)
{
?>
<div
class
=
"list-group-item checkbox"
>
<label><input type=
"checkbox"
class
=
"common_selector name"
value=
"<?php echo $row['name']; ?>"
> <?php
echo
$row
[
'name'
]; ?></label>
</div>
<?php
}
?>
</div>
</div>
</div>
<div
class
=
"col-md-9"
>
<br />
<div
class
=
"row filter_data"
>
</div>
</div>
</div>
</div>
<!--<style>
#loading
{
text-align:center;
background: url(
'loader.gif'
) no-repeat center;
height: 150px;
}
</style>-->
<script>
$(document).ready(
function
(){
filter_data();
function
filter_data()
{
$(
'.filter_data'
).html(
'<div id="loading" ></div>'
);
var
action =
'fetch'
;
var
minimum_price = $(
'#hidden_minimum_price'
).val();
var
maximum_price = $(
'#hidden_maximum_price'
).val();
var
name = get_filter(
'name'
);
$.ajax({
url:
"fetch.php"
,
method:
"POST"
,
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, name:name},
success:
function
(data){
$(
'.filter_data'
).html(data);
}
});
}
function
get_filter(class_name)
{
var
filter = [];
$(
'.'
+class_name+
':checked'
).each(
function
(){
filter.push($(this).val());
});
return
filter;
}
$(
'.common_selector'
).click(
function
(){
filter_data();
});
$(
'#price_range'
).slider({
range:true,
min:3000,
max:6000,
values:[3000, 6000],
step:500,
stop:
function
(event, ui)
{
$(
'#price_show'
).html(ui.values[0] +
' - '
+ ui.values[1]);
$(
'#hidden_minimum_price'
).val(ui.values[0]);
$(
'#hidden_maximum_price'
).val(ui.values[1]);
filter_data();
}
});
});
</script>
</body>
</html>
<?php
//fetch.php
include
(
'connect.php'
);
if
(isset(
$_POST
[
"action"
]))
{
$query
= "
SELECT * FROM tbl_product WHERE product_status =
'0'
";
if
(isset(
$_POST
[
"minimum_price"
],
$_POST
[
"maximum_price"
]) && !
empty
empty
(
$_POST
[
"minimum_price"
]) && !
empty
empty
(
$_POST
[
"maximum_price"
]))
{
$query
.= "
AND price BETWEEN
'".$_POST["minimum_price"]."'
AND
'".$_POST["maximum_price"]."'
";
}
if
(isset(
$_POST
[
"name"
]))
{
$brand_filter
= implode(
"','"
,
$_POST
[
"name"
]);
$query
.= "
AND name IN(
'".$brand_filter."'
)
";
}
$statement
=
$connect
->prepare(
$query
);
$statement
->execute();
$result
=
$statement
->fetchAll();
$total_row
=
$statement
->rowCount();
$output
=
''
;
if
(
$total_row
> 0)
{
foreach
(
$result
as
$row
)
{
$output
.= '
<div
class
=
"col-sm-4 col-lg-3 col-md-3"
>
<div style=
"border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:450px;"
>
<p align=
"center"
><strong><a href=
"#"
>
'. $row['
name
'] .'
</a></strong></p>
<h4 style=
"text-align:center;"
class
=
"text-danger"
>
'. $row['
price
'] .'
</h4>
Brand :
'. $row['
id
'] .'
<br />
</div>
</div>
';
}
}
else
{
$output
=
'<h3>No Data Found</h3>'
;
}
echo
$output
;
}
?>
Reply
Answers (
1
)
PHP and Javascript interact
combo box issue