title: How to fetch data from db based on multiple filter selections using AJAX in Wordpress
body: <p>So I want to filter the data from db using multiple filters. I have 2 selects for now, <strong>GENDER</strong> and <strong>MARITAL STATUS</strong>. If I choose for example <strong>'male'</strong> from <strong>GENDER</strong>, and nothing on <strong>MARITAL STATUS</strong>, I want the results to be all the data that has the option <strong>'male'</strong>. If I select also 'divorced' from MARITAL STATUS, then the results will be the data that has the options 'male' and 'divorced' at the same time.</p>
  
  <pre><code>&lt;div class="sidebar-filters"&gt;
    &lt;div class="filters"&gt;
        &lt;span&gt;Gender&lt;/span&gt;
        &lt;select id="gender" name="gender"&gt;
           &lt;option value=""&gt;Please select gender&lt;/option&gt;
           &lt;option value="male"&gt;male&lt;/option&gt;
           &lt;option value="female"&gt;female&lt;/option&gt;
           &lt;option value="agender"&gt;agender&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;span&gt;Marital Status&lt;/span&gt;
        &lt;select id="marital_status" name="marital_status"&gt;
           &lt;option value=""&gt;Please select marital status&lt;/option&gt;
           &lt;option value="married"&gt;married&lt;/option&gt;
           &lt;option value="widowed"&gt;widowed&lt;/option&gt;
           &lt;option value="separated"&gt;separated&lt;/option&gt;
           &lt;option value="divorced"&gt;divorced&lt;/option&gt;
           &lt;option value="single"&gt;single&lt;/option&gt;
         &lt;/select&gt;
  
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;div class="results-wrap"&gt;
         &lt;?php
              $query = "SELECT * FROM reviews1";
              $result = mysqli_query($conn, $query);
              $queryResult = mysqli_num_rows($result);
              if($queryResult &gt; 0){
                   while($row = mysqli_fetch_assoc($result)){
                       echo "&lt;div class='review-wrap'&gt;
                             &lt;h3&gt;".$row['r_title']."&lt;/h3&gt;
                             &lt;p&gt;".$row['age']."&lt;/p&gt;
                             &lt;/div&gt;";
                     }
             }else{
                 echo "There are no results matching your search";
             }
         ?&gt;
  </code></pre>
  
  <p></p>
  
  <p>In my scripts.js I have</p>
  
  <pre><code>$('#gender').on('change', function(){
       var value = $(this).val();
       $.ajax({
             url: "http://uttertest.ecom-shops.com/wp-admin/admin-ajax.php",
             type: 'POST',
             data: {
                 action: 'filtering',
                 request: value
                  },
             beforeSend:function(){
                   $(".results-wrap").html("Wait...");
             },
             success:function(data){
                   $(".results-wrap").html(data);
             },
             error:function(xhr){
                   $(".results-wrap").html("Error");
             }
             });
   }); 
  </code></pre>
  
  <p>In functions.php I have</p>
  
  <pre><code>add_action( 'wp_ajax_nopriv_filtering', 'filtering' );
  add_action( 'wp_ajax_filtering', 'filtering' );
  
  function filtering(){
      $server = "localhost";
      $username = "username";
      $password = "*****";
      $dbname = "databasename";
      $conn = mysqli_connect($server, $username, $password, $dbname);
            $request = $_POST['request'];
            $query = "SELECT * FROM reviews WHERE gender='$request'";
            $result = mysqli_query($conn, $query);
            $queryResult = mysqli_num_rows($result);
            if($queryResult &gt; 0){
              while($row = mysqli_fetch_assoc($result)){
                  echo "&lt;div class='review-wrap'&gt;
                  &lt;h3&gt;".$row['r_title']."&lt;/h3&gt;
                  &lt;p&gt;".$row['age']."&lt;/p&gt;
              &lt;/div&gt;";
              }
            }else{
              echo "There are no results matching your search";
            }
  
     } 
  </code></pre>
  
  <p>So far it's good, if I change the gender, the data is displayed correct, acorrding to the option chosed. The questions is how to combine the 2 choices from selections? And not only this 2 selections, also some checkboxes added in the future in the html, checked or not checked, and update the data fetched from db, every time a selection is changed or if a checkbox is checked or unchecked.</p>
  
  <p>Also I don't need a submit button, the changes should apply on change, whenever a checkbox is checked or an option from select is chosed.</p>