dynamic fetch data for multiple selectors with jquery and ajax and php

i have e commerce website i have page for categories and search filter this page


i can bring data only from select sort by but how can i do this for all this filter like Manufactures and shop by an price
i know it is only one code he get the values from them all and send it to data page which bring them back to response div as result i need right syntax to send values for this case

can you edit this code

<script type="text/javascript">
        $(document).ready(function() {
            $('#sortBy',).change(function() {
                $.get('data.php', { sort: $(this).val() }, function(data) {
                    $('#response').html(data);
                });
            });
			// Trigger the change event when the page load
            $('#sortBy').trigger('change');
        });
      </script>

Open in new window

AHMED SAMYownerAsked:
Who is Participating?
 
AHMED SAMYownerAuthor Commented:
i found it

insert_checkbox.php

<script>  
 $(document).ready(function(){  
      $('input[type=checkbox],#sort,#category_filter').change(function(){  
           var languages = [];  
           $('.get_value').each(function(){  
                if($(this).is(":checked"))  
                {  
                     languages.push($(this).val());  
                }  
           });
           languages = languages.toString();
           var price = $('#sort').val();
		   var categories_name = $('#category_filter').val();
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{languages:languages,price:$('#sort').val(),categories_name:$('#category_filter').val()},  
                success:function(data){  
                     $('#result').html(data);  
                }  
           });
			$.ajax({  
                url:"list.php",  
                method:"POST",  
                data:{languages:languages,price:$('#sort').val(),categories_name:$('#category_filter').val()},  
                success:function(data){  
                     $('#listview').html(data);  
                }  
           });  		   
      });
	  $('input[type=checkbox],#sort,#category_filter').trigger('change');
 });  
 </script>

Open in new window


insert.php
<?php  
 //insert.php  
 if(isset($_POST["languages"]) && isset($_POST['price']) && isset($_POST['categories_name']))  
 {  
    require "admin/connection.php";

	$product_category=$_POST['categories_name'];
	$sql_cat_name="select * from categories where cat_id='$product_category' or cat_id in (select cat_id from categories where cat_parent_id='$product_category')";
	$query_cat_name=mysqli_query($conn,$sql_cat_name);
	$result_cat_name=mysqli_fetch_array($query_cat_name);
	
	$catArray=explode(",",$result_cat_name);
	
	$pairs=$_POST["languages"];

    $newArray = explode(",", $pairs);

    switch ($_POST['price']) {
      	case '1':
      		$query = "SELECT * FROM products WHERE product_category IN ('" . implode("','", $result_cat_name) . "') OR product_man IN ('" . implode("','", $newArray) . "') OR product_color IN ('" . implode("','", $newArray) . "') OR product_offertype IN ('" . implode("','", $newArray) . "') ORDER BY product_price ASC";
                  
      		break;
      	case '2':
      		$query = "SELECT * FROM products WHERE product_category IN ('" . implode("','", $result_cat_name) . "') OR product_man IN ('" . implode("','", $newArray) . "') OR product_color IN ('" . implode("','", $newArray) . "') OR product_offertype IN ('" . implode("','", $newArray) . "') ORDER BY product_price DESC";
      		break;
        case '3':
            $query = "SELECT * FROM products WHERE product_category IN ('" . implode("','", $result_cat_name) . "') OR product_man IN ('" . implode("','", $newArray) . "') OR product_color IN ('" . implode("','", $newArray) . "') OR product_offertype IN ('" . implode("','", $newArray) . "') ORDER BY product_price DESC";
                  break;
        case '4':
            $query = "SELECT * FROM products WHERE product_category IN ('" . implode("','", $result_cat_name) . "') OR product_man IN ('" . implode("','", $newArray) . "') OR product_color IN ('" . implode("','", $newArray) . "') OR product_offertype IN ('" . implode("','", $newArray) . "') ORDER BY product_price DESC";
                  break;

      	default:
      		$query = "SELECT * FROM products WHERE product_category IN ('" . implode("','", $result_cat_name) . "') OR product_man IN ('" . implode("','", $newArray) . "') OR product_color IN ('" . implode("','", $newArray) . "') OR product_offertype IN ('" . implode("','", $newArray) . "') ORDER BY product_price ASC";
      		break;
    }
       
      $result = mysqli_query($conn, $query);  
      while ($row=mysqli_fetch_array($result)) {
            
      ?>
      	<div class="col-sm-6 col-md-4 wow fadeInUp">
                    <div class="products">
                      <div class="product">
                        <div class="product-image">
						<?php
							$newId=$row['product_id'];
							$sql_img="select * from products_images where product_id='$newId' order by image_id DESC limit 1";
							$query_img=mysqli_query($conn,$sql_img);
							$result_img=mysqli_fetch_array($query_img);
						?>
                          <div class="image"> <a href="detail.php?product=<?php echo $row['product_id']; ?>"><img  src="admin/<?php echo $result_img['image_name']; ?>" alt="speed"></a> </div>
                          <!-- /.image -->
                          
                          <div class="tag new"><span>new</span></div>
                        </div>
                        <!-- /.product-image -->
                        
                        <div class="product-info text-left">
                          <h3 class="name"><a href="detail.php?product=<?php echo $row['product_id']; ?>"><?php echo $row['product_name_en']; ?></a></h3>
						  
                          <?php
				                    	$rate_id=$result_special_offer11['product_id'];

				                    	$sql_rating="SELECT AVG(rating) as rating FROM rating WHERE business_id ='$rate_id' ";
				                    	$query_rating=mysqli_query($conn,$sql_rating);
				                    	$result_rating=mysqli_fetch_array($query_rating);
				                    	if (isset($result_rating)) {
				                    		$rate_level=round($result_rating['rating']);
				                    	}
				                    	else{
				                    		$rate_level=0;
				                    	}
				                    	
				                    	switch ($rate_level){
				                    		case '0':
												$rate_img='<img src="assets/images/zero.png" alt="speedtv"> ';
												break;
											case '1':
												$rate_img='<img src="assets/images/first.png" alt="speedtv"> ';
												break;
											case '2':
												$rate_img='<img src="assets/images/second.png" alt="speedtv"> ';
												break;
											case '3':
												$rate_img='<img src="assets/images/third.png" alt="speedtv"> ';
												break;
											case '4':
												$rate_img='<img src="assets/images/fourth.png" alt="speedtv"> ';
												break;
											case '5':
												$rate_img='<img src="assets/images/fifth.png" alt="speedtv">';
												break;
											default:
												$rate_img='<img src="assets/images/zero.png" alt="speedtv"> ';
				                    	}
				                    ?>
				                    <div class="rating"><?php echo $rate_img; ?></div>

                          <div class="description"></div>
                          
						  <?php
							if(!empty($row['product_offer'])){
								?>
							<div class="product-price"> <span class="price"> $<?php echo $row['product_offer']; ?> </span> <span class="price-before-discount">$ <?php echo $row['product_price']; ?></span> </div>
							<?
							}
							else{
								?>
								<div class="product-price"> <span class="price"> $<?php echo $row['product_price']; ?> </span></div>
								<?
							}
							?>
							<!-- /.product-price --> 
                        </div>
                        <!-- /.product-info -->
                        <div class="cart clearfix animate-effect">
                          <div class="action">
                            <ul class="list-unstyled">
								<li class="lnk wishlist"> <a href="javascript:add_cart(<?php echo $row['product_id']; ?>)" class="add-to-cart" title="cart"> <i class="icon fa fa-shopping-cart"></i> </a> </li>
								<li class="lnk wishlist"> <a href="javascript:add_wishlist(<?php echo $row['product_id']; ?>)" class="add-to-cart" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li>
								<li class="lnk"> <a href="javascript:add_compare(<?php echo $row['product_id']; ?>)" class="add-to-cart" title="Compare"> <i class="icon fa fa-signal" aria-hidden="true"></i> </a> </li>
							</ul>
                          </div>
                          <!-- /.action --> 
                        </div>
                        <!-- /.cart --> 
                      </div>
                      <!-- /.product --> 
                      
                    </div>
                    <!-- /.products --> 
                  </div>
        <!-- /.item -->
      <?
		}
 }    

 ?>  

Open in new window

0
 
Julian HansenCommented:
Do you mean how to get the state of the price filter and the Manufacturers checkboxes and include them in the filter?

To answer that we would need access to the page to see how those are defined.
0
 
AHMED SAMYownerAuthor Commented:
i will include this page now
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
AHMED SAMYownerAuthor Commented:
0
 
AHMED SAMYownerAuthor Commented:
maybe i will include more than one filter like Manufactures and i will remove shop by div,  price div  is must
0
 
AHMED SAMYownerAuthor Commented:
i think i have good helpful example

Insert Checkbox values using Ajax Jquery in PHP

but differences is:
1- i need select not insert.
2- i need to add option selected to search statement.
0
 
AHMED SAMYownerAuthor Commented:
iam gonna help you to help me i edit this code and i have this result

insert_checkbox.php

<!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Insert Checkbox values using Ajax Jquery in PHP</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:500px;">  
                <h3 class="text-center">Insert Checkbox values using Ajax Jquery in PHP</h3>  
                <div class="checkbox">  
                     <input type="checkbox" class="get_value" value="PHP" />PHP <br />  
                     <input type="checkbox" class="get_value" value="ASP" />ASP <br />  
                     <input type="checkbox" class="get_value" value="JSP" />JSP <br />  
                     <input type="checkbox" class="get_value" value="Python" />Python <br />                      
                </div>       
                <button type="button" name="submit" class="btn btn-info" id="submit">Submit</button>  
                <br />  
                <div id="result"></div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('input[type=checkbox]').change(function(){  
           var languages = [];  
           $('.get_value').each(function(){  
                if($(this).is(":checked"))  
                {  
                     languages.push($(this).val());  
                }  
           });  
           languages = languages.toString();  
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{languages:languages},  
                success:function(data){  
                     $('#result').html(data);  
                }  
           });  
      });  
 });  
 </script>  

Open in new window


insert.php

<?php  
 //insert.php  
 if(isset($_POST["languages"]))  
 {  
      $connect = mysqli_connect("localhost", "root", "", "testing");  
      $query = "SELECT * FROM tbl_language WHERE name='".$_POST["languages"]."'";  
      $result = mysqli_query($connect, $query);  
      $row=mysqli_fetch_array($result);
      echo $row['name'];
      echo 'Check Box Data Inserted';  
 }  
 ?>  

Open in new window


need to push to array and add select option to statement
0
 
AHMED SAMYownerAuthor Commented:
at last my friends just small help smaaaaaaaaaaaaaaall

i found what i want but syntax in insert.php is wrong . can you help ???

insert_checkbox.php
<!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Insert Checkbox values using Ajax Jquery in PHP</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:500px;">  
                <h3 class="text-center">Insert Checkbox values using Ajax Jquery in PHP</h3>  
                <div class="checkbox">  
                     <input type="checkbox" class="get_value" value="PHP" />PHP <br />  
                     <input type="checkbox" class="get_value" value="ASP" />ASP <br />  
                     <input type="checkbox" class="get_value" value="JSP" />JSP <br />  
                     <input type="checkbox" class="get_value" value="Python" />Python <br />                      
                </div>
                <select id="sort">
                  <option value="eeee">eeee</option>
                  <option value="tttt"v>tttt</option>
                </select>       
                <button type="button" name="submit" class="btn btn-info" id="submit">Submit</button>  
                <br />  
                <div id="result"></div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('input[type=checkbox],#sort').change(function(){  
           var languages = [];  
           $('.get_value').each(function(){  
                if($(this).is(":checked"))  
                {  
                     languages.push($(this).val());  
                }  
           });  
           languages = languages.toString();

           var price = $('#sort').val();
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{languages:languages,price:$('#sort').val()},  
                success:function(data){  
                     $('#result').html(data);  
                }  
           });  
      });  
 });  
 </script>  

Open in new window


insert.php
<?php  
 //insert.php  
 if(isset($_POST["languages"]) && isset($_POST['price']))  
 {  
      $connect = mysqli_connect("localhost", "root", "", "testing");  
      $query = "SELECT * FROM tbl_language WHERE name like '%".$_POST["price"]."%' OR name like '%".$_POST["languages"]."%'";  
      $result = mysqli_query($connect, $query);  
      while ($row=mysqli_fetch_array($result)) {
      	echo $row['name'];
      	echo '<br>';   
      }

 }  
 ?>  

Open in new window

0
 
AHMED SAMYownerAuthor Commented:
i found it after more trials
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.