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.

Here’s my code:

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

<form method='post' class='myForm' action=''>

<td>
<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>

The problem is that everything works until the user hits Check Out, and then red text doesn’t appear and the dropdown doesn’t disappear. What’s the problem?

Thanks for any and all help!

Answer 1

Having the check out button in a drop down select list isn’t right. These lists are for options, not for commands.

Why don’t you have a checkout button that following the list, and is hidden

<button class="checkOut" style="display:none;" value="Check Out" />

This way, once your room list has been populated, you can simply set the check out button to visible again. This means the page logics flows (checkin – select – checkout).

For the red text, replace the dropdown with something like this?

$(".checkOut").click(function(e) {
  $(".locationSelect").html("<p style='color:red'>Checked out!</p>");
});

Just food for thought.

Alternatively, you could check for the selected option in the $('.locationSelect').change() handler.

$('.locationSelect').change(function(e) {
  if($(this).children(":selected").val() === "CheckOut") {
    // Perform checkout logic.
  }
  else {
    // Perform room select logic.
  }
});