CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Maria Nolorbe
Maria Nolorbe

Reputation: 357

Change PHP Mysql query dynamically using dropdown list

I have a dropdown list that needs to change the following php mysql query dynamically. Specifically the WHERE section. So the dropdown has CATERING, ENTERTAINMENT, VACATIONS, etc. So if someone chooses VACATIONS, the query below will swap entertainment with tblclients.category = 'Vacations' and the results on the page will change.

PHP

$query = mysql_query("SELECT * FROM tblClients  WHERE tblclients.package =  'standard' and tblclients.category = 'Entertainment' LIMIT 0, 9", $connection);

JQUERY - I figured out how to get the following script to know what dropdown list option is selected, but only figured out how to show/hide a DIV.

  <script>  
$(document).ready(function(){

    $('.dropdown .Catering').click(function(){
    $('#page_featured_container').show();

  }); 
    $('.dropdown .Entertainment').click(function(){
    $('#page_featured_container').show();

  }); 

        $('.dropdown .Vacations').click(function(){
    $('#page_featured_container').show();

  }); 
  </script>

HTML Just for a full reference, My Dropdown list looks like such.

    <section class="main">
        <div class="wrapper">
            <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                <span>View By Category</span>
                <ul class="dropdown">
            <?php while ($rows = mysql_fetch_array($query_category)) { ?>
                    <li><a class="<?php echo $rows['category']; ?>"><?php echo $rows['category']; ?></a></li>
            <?php } ?>  
            </ul>
            </div>
        ​</div>
    </section>

So, In theory, my JQUERY would like this...

  <script>  
$(document).ready(function(){

    $('.dropdown .Catering').click(function(){
    CHANGE PHP WHERE STATEMENT AND DISPLAY NEW RESULTS.

Upvotes: 2

Views: 731

Answers (1)

MTroy
MTroy

Reputation: 895

You can perform that by using Ajax query with jquery:

$(".dropdown .Catering").on("click", function()
{
   // getting the classname of clicked category to write your query
   var category = $(this).attr("class");
   $.ajax
   ({
       url:"controller.php?category="+category, // supposed you grab the query like that
       method: "get", // or post as you want
       success: function(data) // where data is the php returned newest list
       {
           // this line will overwrite the html content of 'page_featured_container'
           $("#page_featured_container").html(data);
       }
   });
});

if you prefer use POST method you must add :

method: "post",
data: {category: category},

Upvotes: 3

Related Questions