title: How to create FILTER BY LOCATION (Using checkboxes) engine using php and ajax
body: <p>I have few checkboxes on my hotels webpage . i want to make a simple FILTER BY LOCATION filter engine . which look like this ---<a href="https://i.stack.imgur.com/fh3Bg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fh3Bg.png" alt="here is the image"></a></p>
  
  <p>The result should be combination of checkboxes. 
  Now the problem is i have tried to code this this way but couldnt achive what i wanted.when i check on first checkbox it shows result for the same but when i uncheck it displayed data doesnt change back to default. i need to add sql queries for this but i dont know what to add (logic). please help ...
    Here is my HTML -  </p>
  
  <pre><code>&lt;div class="container main-section" id="main"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;h4&gt;Filter by Location &lt;/h4&gt;
                  &lt;input type="checkbox" id="calangute" name="calangute" /&gt;
                  &lt;label for="calangute"&gt; Calangute&lt;/label&gt;&lt;br&gt;
                  &lt;input type="checkbox" id="baga" name="baga"&gt;
                  &lt;label for="baga"&gt; Baga&lt;/label&gt;&lt;br&gt;
                  &lt;input type="checkbox" id="morjim" name="morjim"&gt;
                  &lt;label for="morjim"&gt; Morjim&lt;/label&gt;&lt;br&gt;
                  &lt;input type="checkbox" id="candolim" name="candolim"&gt;
                  &lt;label for="candolim"&gt; Candolim&lt;/label&gt;&lt;br&gt;
                  &lt;input type="checkbox" id="anjuna" name="anjuna"&gt;
                  &lt;label for="anjuna"&gt; Anjuna&lt;/label&gt;&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="display"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JQuery--</p>
  
  <pre><code>$(document).ready(function(){
  getAllRooms(); // this is for getting all data on page load
  function getAllRooms(){
      $.ajax({
          url:'action.php',
          method: 'POST',
          data:{rooms:1},
          success:function(response){
              $('.display').html(response);
          }
      });
  }
  </code></pre>
  
  <p>//here is getting data on checking checkboxes</p>
  
  <pre><code>function getRooms(){
          var calangute = $('#calangute').is(':checked') ? 'calangute' : '';
          var baga = $('#baga').is(':checked') ? 'baga' : '';
          var morjim = $('#morjim').is(':checked') ? 'morjim' : '';
          var candolim = $('#candolim').is(':checked') ? 'candolim' : '';
          var anjuna = $('#anjuna').is(':checked') ? 'anjuna' : '';
          $.ajax({
              url: 'action.php',
              method: 'POST',
              data: {
                  calangute  : calangute,
                  baga : baga,
                  morjim : morjim,
                  candolim : candolim,
                  anjuna : anjuna,
              },
              success:function(response){
                  $('.display').html(response);
              }
          });
  
  
      }
      $('#calangute').change(function(){
          getRooms();
      });
      $('#baga').change(function(){
          getRooms();
      });
      $('#morjim').change(function(){
          getRooms();
      });
      $('#candolim').change(function(){
          getRooms();
      });
      $('#anjuna').change(function(){
          getRooms();
      });
  
  
  });
  </code></pre>
  
  <p>Here is my PHP --</p>
  
  <pre><code>   &lt;?php
  $conn=mysqli_connect('localhost','cms_user','12345','rooms');
  
  // this is for getting all data on page load
  if (isset($_POST['rooms'])){
      if (isset($_POST['rooms'])){
          $query_all = "SELECT * FROM rooms ORDER BY rand() ";
      }    
      $query_run = mysqli_query($conn,$query_all);
      if (mysqli_num_rows($query_run)&gt;0){
          while ($row = mysqli_fetch_array($query_run)){
              $room_id = $row['id'];
              $room_name = $row['name'];
              $location = $row['location'];
              $stay_type = $row['stay_type'];
              $room_type = ucfirst($row['room_type']);
              $image = $row['image'];
              $price = $row['price'];
  
              echo "
              &lt;div class='container rooms'&gt;
              &lt;div class='row'&gt;
              &lt;div class='col-md-4'&gt;
              &lt;img src='img/$image' alt='room' width='100%'&gt;
          &lt;/div&gt;
          &lt;div class='col-md-6'&gt;
              &lt;h2&gt;$room_name&lt;/h2&gt;
              &lt;p&gt;$stay_type&lt;/p&gt;
              &lt;h4 class='text-success'&gt;$location&lt;/h4&gt;
  
          &lt;/div&gt;
          &lt;div class='col-md-2'&gt;
             &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
              &lt;h4 class='text-primary'&gt;$room_type&lt;/h4&gt;
              &lt;h4&gt;Rs : $price &lt;/h4&gt;
             &lt;a href='#'&gt;&lt;input type='submit' name='book' value='Book Now' class='btn btn-success'&gt;&lt;/a&gt;
          &lt;/div&gt;
              &lt;/div&gt;&lt;/div&gt;
              ";
          }
      } else {
          echo "&lt;center&gt;&lt;h3&gt;No Properties available&lt;/h3&gt;&lt;/center&gt;";
      }
  
  }
  
  //this is for getting data filtered by checkboxes
  
  if (isset($_POST['calangute'])){
      $query = "SELECT * FROM rooms WHERE location = 'calangute' ";
      $run = mysqli_query($conn, $query);
      if (mysqli_num_rows($run)&gt;0){
          while ($row = mysqli_fetch_array($run)){
              $room_id = $row['id'];
              $room_name = $row['name'];
              $location = $row['location'];
              $stay_type = $row['stay_type'];
              $room_type = ucfirst($row['room_type']);
              $image = $row['image'];
              $price = $row['price'];
  
              echo "
              &lt;div class='container rooms'&gt;
              &lt;div class='row'&gt;
              &lt;div class='col-md-4'&gt;
              &lt;img src='img/$image' alt='room' width='100%'&gt;
          &lt;/div&gt;
          &lt;div class='col-md-6'&gt;
              &lt;h2&gt;$room_name&lt;/h2&gt;
              &lt;p&gt;$stay_type&lt;/p&gt;
              &lt;h4 class='text-success'&gt;$location&lt;/h4&gt;
  
          &lt;/div&gt;
          &lt;div class='col-md-2'&gt;
             &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
              &lt;h4 class='text-primary'&gt;$room_type&lt;/h4&gt;
              &lt;h4&gt;Rs : $price &lt;/h4&gt;
             &lt;a href='#'&gt;&lt;input type='submit' name='book' value='Book Now' class='btn btn-success'&gt;&lt;/a&gt;
          &lt;/div&gt;
              &lt;/div&gt;&lt;/div&gt;
              ";
          }
      }else {
          echo "&lt;center&gt;&lt;h3&gt;No Properties available for your search &lt;/h3&gt;&lt;/center&gt;";
      }
  }
  
  ?&gt;
  </code></pre>