Post
Ask Question
dip vyas

dip vyas

  • 1.7k
  • 186
  • 6.4k

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
  1. <?php  
  2. //index.php  
  3. include('connect.php');  
  4. ?>  
  5. <!DOCTYPE html>  
  6. <html lang="en">  
  7. <head>  
  8. <meta charset="utf-8">  
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  10. <meta name="viewport" content="width=device-width, initial-scale=1">  
  11. <meta name="description" content="">  
  12. <meta name="author" content="">  
  13. <title>Product filter in php</title>  
  14. <!--<script src="js/jquery-1.10.2.min.js"></script>  
  15. <script src="js/jquery-ui.js"></script>  
  16. <script src="js/bootstrap.min.js"></script>-->  
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  18. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
  19. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  20. <!-- <link rel="stylesheet" href="css/bootstrap.min.css">  
  21. <link href = "css/jquery-ui.css" rel = "stylesheet">  
  22. <link href="css/style.css" rel="stylesheet">-->  
  23. <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
  24. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  25. </head>  
  26. <body>  
  27. <!-- Page Content -->  
  28. <div class="container">  
  29. <div class="row">  
  30. <br />  
  31. <h2 align="center">Advance Ajax Product Filters in PHP</h2>  
  32. <br />  
  33. <div class="col-md-3">  
  34. <div class="list-group">  
  35. <h3>Price</h3>  
  36. <input type="hidden" id="hidden_minimum_price" value="3000" />  
  37. <input type="hidden" id="hidden_maximum_price" value="6000" />  
  38. <p id="price_show">3000 - 6000</p>  
  39. <div id="price_range"></div>  
  40. </div>  
  41. <div class="list-group">  
  42. <h3>Brand</h3>  
  43. <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">  
  44. <?php  
  45. $query = "SELECT DISTINCT(name) FROM tbl_product WHERE product_status = '0' ORDER BY id DESC";  
  46. $statement = $connect->prepare($query);  
  47. $statement->execute();  
  48. $result = $statement->fetchAll();  
  49. foreach($result as $row)  
  50. {  
  51. ?>  
  52. <div class="list-group-item checkbox">  
  53. <label><input type="checkbox" class="common_selector name" value="<?php echo $row['name']; ?>" > <?php echo $row['name']; ?></label>  
  54. </div>  
  55. <?php  
  56. }  
  57. ?>  
  58. </div>  
  59. </div>  
  60. </div>  
  61. <div class="col-md-9">  
  62. <br />  
  63. <div class="row filter_data">  
  64. </div>  
  65. </div>  
  66. </div>  
  67. </div>  
  68. <!--<style>  
  69. #loading  
  70. {  
  71. text-align:center;  
  72. background: url('loader.gif') no-repeat center;  
  73. height: 150px;  
  74. }  
  75. </style>-->  
  76. <script>  
  77. $(document).ready(function(){  
  78. filter_data();  
  79. function filter_data()  
  80. {  
  81. $('.filter_data').html('<div id="loading" ></div>');  
  82. var action = 'fetch';  
  83. var minimum_price = $('#hidden_minimum_price').val();  
  84. var maximum_price = $('#hidden_maximum_price').val();  
  85. var name = get_filter('name');  
  86. $.ajax({  
  87. url:"fetch.php",  
  88. method:"POST",  
  89. data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, name:name},  
  90. success:function(data){  
  91. $('.filter_data').html(data);  
  92. }  
  93. });  
  94. }  
  95. function get_filter(class_name)  
  96. {  
  97. var filter = [];  
  98. $('.'+class_name+':checked').each(function(){  
  99. filter.push($(this).val());  
  100. });  
  101. return filter;  
  102. }  
  103. $('.common_selector').click(function(){  
  104. filter_data();  
  105. });  
  106. $('#price_range').slider({  
  107. range:true,  
  108. min:3000,  
  109. max:6000,  
  110. values:[3000, 6000],  
  111. step:500,  
  112. stop:function(event, ui)  
  113. {  
  114. $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);  
  115. $('#hidden_minimum_price').val(ui.values[0]);  
  116. $('#hidden_maximum_price').val(ui.values[1]);  
  117. filter_data();  
  118. }  
  119. });  
  120. });  
  121. </script>  
  122. </body>  
  123. </html>  
  1. <?php  
  2. //fetch.php  
  3. include('connect.php');  
  4. if(isset($_POST["action"]))  
  5. {  
  6. $query = "  
  7. SELECT * FROM tbl_product WHERE product_status = '0'  
  8. ";  
  9. if(isset($_POST["minimum_price"], $_POST["maximum_price"]) && !emptyempty($_POST["minimum_price"]) && !emptyempty($_POST["maximum_price"]))  
  10. {  
  11. $query .= "  
  12. AND price BETWEEN '".$_POST["minimum_price"]."' AND '".$_POST["maximum_price"]."'  
  13. ";  
  14. }  
  15. if(isset($_POST["name"]))  
  16. {  
  17. $brand_filter = implode("','", $_POST["name"]);  
  18. $query .= "  
  19. AND name IN('".$brand_filter."')  
  20. ";  
  21. }  
  22. $statement = $connect->prepare($query);  
  23. $statement->execute();  
  24. $result = $statement->fetchAll();  
  25. $total_row = $statement->rowCount();  
  26. $output = '';  
  27. if($total_row > 0)  
  28. {  
  29. foreach($result as $row)  
  30. {  
  31. $output .= '  
  32. <div class="col-sm-4 col-lg-3 col-md-3">  
  33. <div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:450px;">  
  34. <p align="center"><strong><a href="#">'. $row['name'] .'</a></strong></p>  
  35. <h4 style="text-align:center;" class="text-danger" >'. $row['price'] .'</h4>  
  36. Brand : '. $row['id'] .' <br />  
  37. </div>  
  38. </div>  
  39. ';  
  40. }  
  41. }  
  42. else  
  43. {  
  44. $output = '<h3>No Data Found</h3>';  
  45. }  
  46. echo $output;  
  47. }  
  48. ?>

Answers (1)