Sending id through ajax forms

Question

I have a couple form elements that when clicked update the database and disappear.

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.

The problem is, there multiple sets of the above process (meaning there are many Check In buttons, which turn into selects and then read Checked Out, 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 Check In button was clicked, the ajax would send the hidden field with it?

Here's my html:

<button class="checkIn">Check In</button>

<form method='post' class='myForm' action=''>
  <select name='locationSelect' class='locationSelect'>
     <option value='1'>Exam Room 1</option>
     <option value='2'>Exam Room 2</option>
     <option value='3'>Exam Room 3</option>
     <option value='4'>Exam Room 4</option>
     <option value='CheckOut'>Check Out</option>
  </select>
</form>

and here is the jquery

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
$(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);
       }
    });
});

</script>

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!

Thanks for any and all help!

Answer 1

It is cleaner to send data as a map.. (Key : value ) pairs when sending to the server.

Instead of this

data: "checkIn="+$(this).val(),

Try sending it this way

data: { "checkIn" :  $(this).val() } ,

EDIT

To perform this logic you need not use a hidden input fields in the first place.. I would prefer using HTML5 data-* attributes to get the work done.. This also passes HTML validation...

Lets assume that the button and form are one below another.. Then you can give the button a data attribute called button-1 and the select-1 for the corresponding select..

The HTML will look something like this..

<button class="checkIn" data-param="button-1">Check In</button>

<form method='post' class='myForm' action=''>
  <select name='locationSelect' class='locationSelect' data-param="location-1">
     <option value='1'>Exam Room 1</option>
     <option value='2'>Exam Room 2</option>
     <option value='3'>Exam Room 3</option>
     <option value='4'>Exam Room 4</option>
     <option value='CheckOut'>Check Out</option>
  </select>
</form>
<div class="finished" >
    Checked Out
</div>

<button class="checkIn" data-param="location-2">Check In</button>

<form method='post' class='myForm' action=''>
  <select name='locationSelect' class='locationSelect' data-param="location-2">
     <option value='1'>Exam Room 1</option>
     <option value='2'>Exam Room 2</option>
     <option value='3'>Exam Room 3</option>
     <option value='4'>Exam Room 4</option>
     <option value='CheckOut'>Check Out</option>
  </select>
</form>
<div class="finished" >
    Checked Out
</div>
.....

Javascript

$(document).ready(function() {
    $('.locationSelect').hide();  // Hide all Selects on screen
    $('.finished').hide();        // Hide all checked Out divs on screen

    $('.checkIn').click(function() {
        var $e = $(this);
        var data = $e.data("param").split('-')[1] ;
        // gets the id  of button  (1 for the first button)
        // You can map this to the corresponding button in database...
        $.ajax({
            type: "POST",
            url: "changeloc.php",
            // Data used to set the values in Database
            data: { "checkIn" : $(this).val(), "buttonid" : data},
            success: function() {
                // Hide the current Button clicked
                $e.hide();
                // Get the immediate form for the button
                // find the select inside it and show...
                $e.nextAll('form').first().find('.location').show();
            }
        });
    });

    $('.locationSelect').change(function() {
        $e = $(this);
        var data = $e.data("param").split('-')[1] ;
        // gets the id  of select (1 for the first select)
        // You can map this to the corresponding select in database...
        $.ajax({
            type: "POST",
            url: "changeloc.php",
            data: { "locationSelect" : $(this).val(), "selectid" : data},
            success: function() {
                // Do something here
            }
        });
    });
    $('.locationSelect option[value="CheckOut"]').click(function() {
        var $e = $(this);
        var data = $e.closest('select').data("param").split('-')[1] ;
        // gets the id  of select (1 for the first select)
        // You can map this to the corresponding select in database...
        // from which checkout was processed
        $.ajax({
            type: "POST",
            url: "changeloc.php",
            data: { "checkOut" : $(this).val(), "selectid" : data},
            success: function() {
                // Get the immediate form for the option
                // find the first finished div sibling of form
                // and then show it..
                $e.closest('form').nextAll('.finished').first().show();
                // Hide the current select in which the option was selected
                $e.closest('.locationSelect').hide();
                alert('done');
            },
            error: function(request) {
                alert(request.responseText);
            }
        });
    });
});​

I have written most of the logic as comments in the code..

Answer 2

So from my understanding of what your asking here, you have multiple instances of that HTML for different exam rooms? If this is the case, give either the button or the parent wrapper the id you want that somehow associates it to the row in the database you're trying to update. You don't need a hidden field, just give the button a data attribute with the id key you need. For the this example lets call it group_1.

So wrap the group in your HTML:

<div class='group' id='group_1'>
    <button class="checkIn">Check In</button>

    <form method='post' class='myForm' action=''>
      <select name='locationSelect' class='locationSelect'>
         <option value='1'>Exam Room 1</option>
         <option value='2'>Exam Room 2</option>
         <option value='3'>Exam Room 3</option>
         <option value='4'>Exam Room 4</option>
         <option value='CheckOut'>Check Out</option>
      </select>
    </form>
</div>

On the button click, grab the parent wrappers ID:

$('.checkIn').click(function(){
    var id = $(this).parent('.group').attr('id');
    $.ajax({
    type: "POST",
    url: "changeloc.php",
    data: "checkIn="+$(this).val()+"&group="+id,
    success: function(){
      $('.checkIn').css("display","none");
      $('.locationSelect').show();

    }
    });
});

Then, on the server side, update your DB with some sort of logic that determines which group you're updating using the second data value you sent in your AJAX.