title: How to sort results of mysql query using drop down list on the client side?
body: <p>While this is a common question on stackoverflow, it seems that in every instance, the answer seems to be specific to the code belonging to the person who asked the question. After working on my own code I feel as if I am only a few rogue lines away from having this work. Essentially, what I am trying to do is filter the results of a php mysql query that has been output into a dynamic table. I want to do this by creating a select type drop down list which will sort the data from the intial php query according to different values (ie, alphabetically, or by ID). I want this all to be done <strong>client side</strong> without refreshing the page. For an example of what I'm talking about, observe the sort drop down menu on the right side of this page near the top, just below the header: <a href="http://www.walmart.com/browse/3944_3951_132982" rel="nofollow">http://www.walmart.com/browse/3944_3951_132982</a><br>
  Could someone please take a look at my code and point out what I'm still getting wrong, or at least point me in the direction of a quality tutorial. Thanks!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
        &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
        &lt;title&gt;Rg Distribution&lt;/title&gt;
          &lt;script&gt;
   function sortResult(str)
   {
   if (str=="")
    {
    document.getElementById("result").innerHTML="";
    return;
    } 
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
      {
      document.getElementById("result").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET","condiments.php?q"=+str,true);
  xmlhttp.send();
  }
  &lt;/script&gt;
           &lt;/head&gt;
        &lt;body&gt;
  
        &lt;div id="logo"&gt;&lt;img id="mainlogo" src="rglogo.png"&gt;
  
        &lt;div id="header"&gt;
        &lt;div id="ulwrapleft"&gt;
        &lt;ul id="nav_left"&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="products.html"&gt;our products&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;  
  
          &lt;div id="ulwrapright"&gt;
          &lt;ul id="nav_right"&gt;
  
          &lt;li&gt;where to buy&lt;/li&gt;
          &lt;li&gt;contact&lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;div class="mainbody"&gt;
      &lt;form&gt;
  &lt;select name="sortby" onchange="sortResult(this.value)"&gt;
               &lt;option value="ID" selected&gt;ID&lt;/option&gt;
              &lt;option value="product_name"&gt;name&lt;/option&gt;
  
  
  &lt;/select&gt;
  &lt;button type"submit"&gt;submit&lt;/button&gt;
  &lt;/form&gt;
      &lt;div id="result"&gt;&lt;?php echo $dyn_table; ?&gt;&lt;/div&gt;
  
  
      &lt;/div&gt;
       &lt;/body&gt;
        &lt;/html&gt;
  </code></pre>
  
  <p>PHP CODE:</p>
  
  <pre><code>&lt;?php
  
  
          $username = "";
          $password = "";
          $hostname = "";
          $db_name = "";
  
      $conn = mysqli_connect($hostname, $username, $password, $db_name) or die("Unable to connect");
      $sql = "SELECT * FROM food_products WHERE alt_tag1 = 'condiment' ORDER BY ID";
  
      $result = mysqli_query($conn, $sql);
      $i = 0;
      $dyn_table = '&lt;table border="0" cellpadding="10"&gt;';
  while($row = mysqli_fetch_array($result)){ 
  
      $id = $row["ID"];
      $product_name = $row["product_name"];
      $image = $row["image"];
      $link = $row["link"];
  
      if ($i % 3 == 0) { 
          $dyn_table .= '&lt;tr&gt;&lt;td&gt;&lt;a href="' . $link . '"&gt;' . '&lt;img src=' . $image . '&gt;' . '&lt;/a&gt;' . '&lt;br&gt;' . $product_name . '&lt;/td&gt;';
      } else {
          $dyn_table .= '&lt;td&gt;' . '&lt;img src=' . $image . '&gt;' . '&lt;br&gt;' . $product_name . '&lt;/td&gt;';
      }
      $i++;
  }
  $dyn_table .= '&lt;/tr&gt;&lt;/table&gt;';
  
  mysqli_close($conn);
  ?&gt;
  </code></pre>