title: Sending id through ajax forms
body: <p>I have a couple form elements that when clicked update the database and disappear.</p>
  
  <p>At first, I have a button that reads Check In. Upon clicking it, the database is updated and a dropdown is presented in place of the button. In the dropdown, there are locations for the user to choose, that have values of their corresponding location-number, which upon clicking update the database. The last option is labeled Check Out, and upon clicking it, the database is supposed to be updated one last time, and then red text saying Checked Out should appear.</p>
  
  <p>The problem is, there multiple sets of the above process (meaning there are many Check In buttons, which turn into selects and then read <strong>Checked Out</strong>, which all work individually). So what I need is a way to pass the id of each set to the database at the same time I'm updating the database. I was thinking something like a hidden field underneath each button, that was populated with the id, and then when the <strong>Check In</strong> button was clicked, the ajax would send the hidden field with it? </p>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;button class="checkIn"&gt;Check In&lt;/button&gt;
  
  &lt;form method='post' class='myForm' action=''&gt;
    &lt;select name='locationSelect' class='locationSelect'&gt;
       &lt;option value='1'&gt;Exam Room 1&lt;/option&gt;
       &lt;option value='2'&gt;Exam Room 2&lt;/option&gt;
       &lt;option value='3'&gt;Exam Room 3&lt;/option&gt;
       &lt;option value='4'&gt;Exam Room 4&lt;/option&gt;
       &lt;option value='CheckOut'&gt;Check Out&lt;/option&gt;
    &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and here is the jquery</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {    
      $('.locationSelect').hide();
      $('.finished').hide();
  });
  
  $('.checkIn').click(function(){
      $e = $(this);
      $.ajax({
      type: "POST",
      url: "changeloc.php",
      data: "checkIn="+$(this).val(),
      success: function(){
        $('.checkIn').css("display","none");
                $('.locationSelect').show();        
           }
      });
  });
  
  $('.locationSelect').change(function(){
      $e = $(this);
      $.ajax({
         type: "POST",
         url: "changeloc.php",
         data: "locationSelect="+$(this).val(),
         success: function(){
  
         }
      });
  });
  $('.locationSelect option[value="CheckOut"]').click(function(){
      $e = $(this);
      $.ajax({
         type: "POST",
         url: "changeloc.php",
         data: "checkOut="+$(this).val(),
         success: function(){
         $('.locationSelect').css("display","none");
         $('.finished').show();
         alert('done');
         },
         error: function(request){
         alert(request.responseText);
         }
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm not sure if my solution would be viable, so please feel free to propose other solutions. If you need any other details, please just ask! </p>
  
  <p>Thanks for any and all help!</p>