I've been developing a site for a family member for months now and for the past month have been stuck on the function of the site that filters SQL results.

Here is the page I am working on: <http://www.drivencarsales.co.uk/used-cars.php>

I am just trying to let my users filter the PHP + MySQL results listed on the right of the page with the form to the left of the page.

So here is my current setup:

I connect to the database and table that contains all of the vehicle data on the site using this 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 to the database.";
    exit;
}
?>
I then have another file that includes all of my 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 FROM import ORDER BY Make ASC");
} catch (Exception $e) {
  echo "Error.";
  exit;
}

try {
  $filterres = $db->query("SELECT DISTINCT Make FROM import ORDER BY Make ASC");
} catch (Exception $e) {
  echo "Error.";
  exit;
}
?>

```

The first query is used for the listing results when all rows are displayed in the table.

The second query is used for the 'Make' select element in the form, it simply displays all of the 'Make's' that are displayed in the table and does not show duplicated.

I then have the block of HTML and PHP that echos the 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 you can see it echo's out all of the rows using a while loop in the template.

Last but not least I have my 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 only need to look at the top of the form as the rest isn't relevant, it's basically using the query from code block 2 to display all of the makes into the select element and uses a while loop once again to put every make in the vehicle SQL table.

So down to my question... how can I use AJAX to display only the rows in my SQL table that include the 'Make' that has been selected in my form?

If anyone could take some time to show me an example that would work with my setup that would be great, I am only familiar with PHP and have been struggling to understand how I can use AJAX in my situation, I just need a nice simple way to update the listing.