TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
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
Forums
Monthly Leaders
Forum guidelines
dip vyas
NA
227
37.9k
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