title: PHP AJAX update MySql query onChange from dropdown (filtering)
body: <p>I'm having problems with updating the products page on dropdown change using PHP in combination with Ajax. Right now it's not updating the query when I select an item from the dropdown menu. The query itself is working fine.</p>
  
  <p>What I want is: when a user selects a different option from any of multiple dropdown menus, the query is updated by means of an Ajax POST request. Thus the results get filtered by the selection of the dropdown.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;select id="Gender"&gt;
      &lt;option value="" disabled selected&gt;--Geslacht--&lt;/option&gt;
      &lt;option value="1"&gt;Man&lt;/option&gt;
      &lt;option value="2"&gt;Vrouw&lt;/option&gt;
      &lt;option value="3"&gt;Beide&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The PHP MySQL query to select the data:</p>
  
  <pre><code>$statements = '';
      if (isset($_POST['GenderID'])) {
           $gender_query = $_POST['GenderID'];
          $statements .= " AND `product`.`gender_id` = '$gender_query' "; //condition for each property
      }
  
  
      $query = "SELECT    `product`.`product_name` AS pname, 
                          `product`.`product_img` AS pimg,
                          `brand`.`brand_name` AS bname
              FROM
                          `product`                                           
              INNER JOIN
                          `brand`
              ON 
                          (`product`.`brand_id`=`brand`.`brand_id`)   
              WHERE 
                          `product`.`active` = '1' $statements";
  
    $result2 = $conn-&gt;query($query);  
  
                      if ($result2-&gt;num_rows &gt; 0) {
                      // output data of each row
                         while($row = $result2-&gt;fetch_assoc()) 
                          {                       
                              echo'
                              &lt;div class="col-lg-4"&gt;
                                  &lt;div class="card"&gt;
  
                                     &lt;div class="view overlay"&gt;
  
                                      &lt;a href="#"&gt;
                                          &lt;img src="products/',$row["pimg"],'" class="img-fluid"&gt;
                                      &lt;/a&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="card-body"&gt;
                                              &lt;h4 class="card-title"&gt;',$row["bname"],'&lt;/h4&gt;
                                              &lt;p class="card-text"&gt;',$row["pname"],'&lt;/p&gt;
                                              &lt;a href="#" class="btn btn-outline-success my-2 my-sm-0"&gt;Button&lt;/a&gt;
                                          &lt;/div&gt;
  
                                      &lt;/div&gt;
                                      &lt;/div&gt;';
                                  }
                              }
  </code></pre>
  
  <p>The JS Jquery/Ajax:</p>
  
  <pre><code>$(document).ready(function(){
      $("#Gender").change(function () {
          var gender = $("#Gender").val();
          jQuery.ajax({
              type: "POST",
              data:  {GenderID: gender},
              success: function(data){ 
                  if(data.success == true){ 
                     alert('success'); 
                  }
              }               
          });
      });
  });
  </code></pre>
  
  <p>It's probably the smallest mistake that I'm making. Any help is much appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've added the code of what executes the Mysql query.</p>