Dynamic step filter with PHP, MySQL and Ajax

Question

I don’t know if I’m right here but …
I’m creating a dropdown step filter with PHP, MySQL and Ajax for an WP Website and there are three steps. So when i choose the first step, I get a new dropdown with the second step and so for the third step. When I choose a category from the third step I also get finally my results. I followed a tutorial for this and for now it works fine, but I missed something in this tutorial. I want to also get results when I choose a category from the first step and the same for the second step. And when nothing is chosen I want to show all results in the database. Someone know a tutorial specially for this or know how I can “pimp” my codes. Here are the two PHP files I have. I think the dbconfig.php doesn’t have relevance in this.

index.php:

<!doctype html>
<html lang="de">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>

  $(document).ready(function(){
    $('#category').on('change', function(){
      var categoryID = $(this).val();
      if(categoryID){
        $.ajax({
          type:'POST',
          url:'ajaxdata.php',
          data:'category_id='+categoryID,
          success:function(html){
            $('#subcategory').html(html);
            $('#subcategory2').html('<option value="">Wählen Sie eine Kategorie aus! 
</option>');
          }
        });
      } else {
        $('#subcategory').html('<option value="">Zuerst Überkategorie auswählen!</option>');
      }
    });

    $('#subcategory').on('change', function(){
      var subcategoryID = $(this).val();
      if(subcategoryID){
        $.ajax({
          type:'POST',
          url:'ajaxdata.php',
          data:'subcategory_id='+subcategoryID,
          success:function(html){
            $('#subcategory2').html(html);
          }
        });
      } else {
        $('#subcategory2').html('<option value="">Zuerst Unterkategorie auswählen!</option>');
      }
    });


    // Funktion zum anzeigen der Ergebnisse
    $('#subcategory2').on('change', function(){
      var subcategory2ID = $(this).val();
      if(subcategory2ID){
        $.ajax({
          type:'POST',
          url:'ajaxdata.php',
          data:'subcategory2_id='+subcategory2ID,
          success:function(html){
            $('#partner').html(html);
          }
        });
      } else {
        $('#partner').html('<h1>Zuerst Unterkategorie auswählen!</h1>');
      }
    });
  });

</script>
</head>
<body>






<?php

  // Include connection.php
  include_once 'dbconfig.php';

  // Fetch all the category data
  $query = "SELECT * FROM categories WHERE status = 1 ORDER BY category_name ASC";
  $result = $connect->query($query);

?>

<!-- Category dropdown -->
<form action="" method="post">
  <select id="category" name="category">
    <option value=""></option>
    <?php

      if($result->num_rows > 0){
        while($row = $result->FETCH_ASSOC()){
          echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';

        }
      } else {
        echo '<option value="">Nicht verfügbar!</option>';
      }

    ?>
  </select>

  <!-- Subcategory dropdown -->
  <select id="subcategory" name="subcategory">
    <option value="">Kategorie auswählen!</option>
  </select>

  <!-- 2nd subcategory dropdown -->
  <select id="subcategory2" name="subcategory2">
    <option value="">Kategorie auswählen!</option>
  </select>
</form>

<!-- Partner results -->
<div id="partner">
  <?php

    if($result->num_rows > 0){
      while($row = $result->FETCH_ASSOC()){
        ?>
        <div>
          <h1><? echo $row['partner_name'] ?></h1>
          <img src="<? echo $row['partner_logo'] ?>">
          <a href="<? echo $row['partner_link'] ?>">Zum Unternehmen!</a>
        </div>
        <?php
      }
    } else {
      echo '<p>Nichts gefunden!<p>';
    }
   ?>
</div>


<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

ajaxdata.php:

 <?php

 include_once 'dbconfig.php';

 if(!empty($_POST['category_id'])){
 $query = "SELECT * FROM subcategories WHERE category_id = ".$_POST['category_id']." AND 
 status = 1 ORDER BY subcategory_name ASC";
 $result = $connect->query($query);

 if($result->num_rows > 0){
  echo '<option value="">Kategorie auswählen</option>';

  while($row = $result->FETCH_ASSOC()){
    echo '<option value="'.$row['subcategory_id'].'">'.$row['subcategory_name'].'</option>';
  }
  } else {
  echo '<option value="">Nicht verfügbar!</option>';
  }

  }
 elseif(!empty($_POST['subcategory_id'])){
 $query = "SELECT * FROM subcategories2 WHERE subcategory_id = ".$_POST['subcategory_id']." 
 AND status = 1 ORDER BY subcategory2_name ASC";
 $result = $connect->query($query);

 if($result->num_rows > 0){
  echo '<option value="">Untekategorie auswählen!</option>';

  while($row = $result->FETCH_ASSOC()){
    echo '<option 
 value="'.$row['subcategory2_id'].'">'.$row['subcategory2_name'].'</option>';
  }
 }
 else {
  echo 'Nothing found!';
 }
}

 // Anzeigen der Ergebnisse nach dem Filtern

elseif(!empty($_POST['subcategory2_id'])){
$query  = "SELECT * FROM partner WHERE subcategory2_id = ".$_POST['subcategory2_id']." AND 
status = 1 ORDER BY partner_name ASC";
$result = $connect->query($query);

if($result->num_rows > 0){

  while($row = $result->FETCH_ASSOC()){
    ?>
    <div>
      <h1><? echo $row['partner_name'] ?></h1>
      <img src="<? echo $row['partner_logo'] ?>">
      <a href="<? echo $row['partner_link'] ?>">Zum Unternehmen!</a>
    </div>
    <?php
  }
} else {
  echo 'Nothing found!';
}
}

?>
0
mivanov 4 months 0 Answers 13 views 0

Leave an answer