php - AJAX: Display different SQL queries -

i've been developing site family member months , past month have been stuck on function of site filters sql results.

here page working on: http://www.drivencarsales.co.uk/used-cars.php

i trying let users filter php + mysql results listed on right of page form left of page.

so here current setup:

i connect database , table contains of vehicle data on site using php:

<?php try {     $db = new pdo("mysql:host=localhost;dbname=","","");     $db->setattribute(pdo::attr_errmode,pdo::errmode_exception);     $db->exec("set names 'utf8'"); } catch (exception $e) {     echo "could not connect database.";     exit; } ?> have file includes of sql queries: <?php include('database.php'); try {   $results = $db->query("select make, model, colour, fueltype, year, mileage, bodytype, doors, variant, enginesize, price, transmission, picturerefs, servicehistory, previousowners, options, fourwheeldrive import order make asc"); } catch (exception $e) {   echo "error.";   exit; }  try {   $filterres = $db->query("select distinct make import order make asc"); } catch (exception $e) {   echo "error.";   exit; } ?> 

the first query used listing results when rows displayed in table.

the second query used 'make' select element in form, displays of 'make's' displayed in table , not show duplicated.

i have block of html , php echos results:

<?php include('db-affinity/filter.php'); ?>       <div class="col-md-8 col-sm-8 col-lg-8">       <?php while($row = $results->fetch(pdo::fetch_assoc))       {       echo '         <div class="listing-container ' . $row["make"] . '">           <a href="carpage.php"><h3 class="model-listing-title clearfix">'.$row["make"].' '.$row["model"].' '.$row["variant"].'</h3></a>           <h3 class="price-listing">£'.number_format($row['price']).'</h3>         </div>         <div class="listing-container-spec">          <img src="'.(explode(',', $row["picturerefs"])[0]).'" class="stock-img-finder"/>           <div class="ul-listing-container">             <ul class="overwrite-btstrp-ul">               <li class="diesel-svg list-svg">'.$row["fueltype"].'</li>               <li class="saloon-svg list-svg">'.$row["bodytype"].'</li>               <li class="gear-svg list-svg">'.$row["transmission"].'</li>               <li class="color-svg list-svg">'.$row["colour"].'</li>             </ul>           </div>           <ul class="overwrite-btstrp-ul other-specs-ul h4-style">             <li>mileage: '.number_format($row["mileage"]).'</li>             <li>engine size: '.$row["enginesize"].'cc</li>           </ul>           <button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> history checked            </button>           <button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> more details            </button>           <button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> test drive            </button>           <h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 more photos</h4>         </div>           ';       } ?> 

as can see echo's out of rows using while loop in template.

last not least have form:

<div class="container con-col-listing">     <div class="row">       <div class="col-md-4 col-sm-4">        <form class="car-finder-container dflt-container">          <h2 class="h2-finder">car finder</h2>          <ul class="toggle-view">            <li class="li-toggle">             <h4 class="h4-finder-toggle">make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>             <div class="panel">              <select class="form-control select-box">                  <option value="make-any">make (any)</option>                  <?php while($make = $filterres->fetch(pdo::fetch_assoc))                  {                  echo '                  <option value="'. $make["make"].'">'.$make["make"].'</option>                  ';                  } ?>              </select>              <select class="form-control last-select select-box">                  <option value="model-any">model (any)</option>                  <option value="two">two</option>                  <option value="three">three</option>                  <option value="four">four</option>                  <option value="five">five</option>              </select>             </div>            </li>            <li class="li-toggle">             <h4 class="h4-finder-toggle">body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>             <div class="panel">              <input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>              <label for="four-by-four-checkbox" class="label-checkbox">4x4</label>              <input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>              <label for="convertible-checkbox" class="label-checkbox">convertible</label>              <input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>              <label for="coupe-checkbox" class="label-checkbox">coupe</label>             </div>           </li>           <li class="li-toggle">             <h4 class="h4-finder-toggle">transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>             <div class="panel">              <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>              <label for="automatic-checkbox" class="label-checkbox">automatic</label>              <input id="manual-checkbox" class="float-checkbox" type="checkbox"/>              <label for="manual-checkbox" class="label-checkbox">manual</label>              <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>              <label for="semi-auto-checkbox" class="label-checkbox">semi automatic</label>             </div>           </li>         </ul>          <button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> search cars           </button>          <h4 class="h4-finder"><a href="#">try our smart search </a><span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>        </form>       </div> 

you need @ top of form rest isn't relevant, it's using query code block 2 display of makes select element , uses while loop once again put every make in vehicle sql table.

so down question... how can use ajax display rows in sql table include 'make' has been selected in form?

if take time show me example work setup great, familiar php , have been struggling understand how can use ajax in situation, need nice simple way update listing.

$make = $_post['make']; //or $_get if that's how roll $query = "     select make, model, etc.     mytable     make = '$make' "; 

that display results make selected. can repeat rest of selection filters values posted html form. ajax call might like

$.ajax({     type: "post",     url: "path/to/php/script",     data: $('#myform').serialize(),     datatype: "json",     success: function(resp) {         var response = json.parse(resp);         //code output table goes here     } });