title: Difficulty using jQuery AJAX to retrieve data from MYSQL
body: <p>I am trying to use the jQuery ajax api to retrieve data from a mysql database. The SQL query I am using is working correctly as I have tested it by creating a user form and traditionally <code>$_POST</code>ing its content to see if it retrieves the correct data from my database. </p>
  
  <p>However, I now want to retrieve the data from my mysql table without having to reload the page using the jQuery ajax function. I am a novice when it comes to jQuery, I haven't used it much before, and I would really very much appreciate it if someone could provide me with a nice example as to how it works. I have looked online at various articles and guides and I just cannot understand it. </p>
  
  <p>Here is a form: </p>
  
  <pre><code>&lt;form id="restaurant_reservation"&gt;
      &lt;label for="date"&gt;Reservation Date?&lt;/label&gt;
      &lt;input type="text" name="date" id="date" value="yyyy-mm-dd" /&gt;
  
      &lt;label for="capacity"&gt;Amount of Customers?&lt;/label&gt;
      &lt;input type="text" name="capacity" id="capacity" /&gt;
  
      &lt;label for="license"&gt;Smoking or Non-Smoking Area?&lt;/label&gt;
  
      &lt;select id="license"&gt;
          &lt;option value="0" id="no"&gt;Smoking&lt;/option&gt;
          &lt;option value="1" id="yes"&gt;Non-Smoking&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the php code:</p>
  
  <pre><code>&lt;?php
  
  $user_reservation_date = $_POST['user_date'];
  $user_customer_amount = $_POST['customer_amount'];
  $user_smoking_non_smoking = $_POST['user_smoking_selection'];
  
  $my_query = "SELECT * FROM restaurant 
               WHERE $user_reservation_date = date_available
               AND $user_customer_amount &gt;= max_seating
               AND $user_smoking_non_smoking = smoking_choice";
  
  $result =&amp; $db-&gt;query($my_query);
  
  if (PEAR::isError($result)) {
      die($result-&gt;getMessage());
  }
  
  
  echo '&lt;div id="output"&gt;';
  
  echo'&lt;table"&gt;';
  echo '&lt;th&gt;restaurant name&lt;/th&gt;';
  echo '&lt;th&gt;Max Customer Seating&lt;/th&gt;';
  echo '&lt;th&gt;Smoking or Non Smoking&lt;/th&gt;';
  echo '&lt;th&gt;Average price per head&lt;/th&gt;';
  
  while($row =&amp; $result-&gt;fetchRow()) {
      echo '&lt;tr&gt;';
      echo '&lt;td&gt;'.$row['rest_name'].'&lt;/td&gt;'
      echo '&lt;td&gt;'.$row['max_seating'].'&lt;/td&gt;'
      echo '&lt;td&gt;'.$row['smoking_choice'].'&lt;/td&gt;'
      echo '&lt;td&gt;'.$row['avg_price_per_head'].'&lt;/td&gt;'
      echo '&lt;/tr&gt;';
  }
  
  echo '&lt;/table&gt;';
  ?&gt;
  </code></pre>
  
  <p>Here is my attempt at the jquery code:</p>
  
  <pre><code>$(function(){
      $('#date').keyup(function(){
          var user_input= $('#date').val();
      });
  });
  
  $(function(){
              $('#date').keyup(function(){
  
              var user_input1=$('#date').val();
  
              $.ajax({
                  type: 'POST',
                  data: ({user_date : user_input1}),
                  url: 'search.php',
                  success: function(data) {
                       $('#output_div').html(data);
            }
          });
      });
  });
  </code></pre>
  
  <p>I use the same code but change the #values for the other two fields from the form.</p>
  
  <p>I would like to use jQuery ajax to get the input and selected values of this form and store them in a variable in my php document so that I can then use the users form data in my sql query to retrieve the appropriate restaurants.</p>
  
  <p><br/></p>
  
  <p>I would really love to learn how to do this, and I would really apreciate any help. Thanks so much for reading. I'm sorry if I have been vague in describing my question properly. Thanks.</p>