Question

I have a website that updates the users location through the use of form elements.

The first thing a user does is click a button labeled Check In. This updates the database ( a php on another page through the use of AJAX). After clicking Check In, the user is presented with a select/dropdown with a list of locations. The user clicks one of the locations on the select, then the php page is updated with the location again. The user can do this many times, with each time updating the database. When the user is done, he scrolls down the select/dropdown to the last option called Check Out. When the user hits checkout, the database is updated once more, and red text appears instead of the select saying “Checked Out”.

Here’s my code (minus the php/database stuff):

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

<script type="text/javascript">

$(document).ready(function() {
  // Hide the form on load      
  $('.locationSelect').hide();
  // Hide the completed message
  $('.finished').hide();
});

// When someone clicks checkin this function will be called
$('.checkIn').click(function(){
$e = $(this);
 $.ajax({
    type: "POST",
    url: "changeloc.php", // this page adds date to the database
    data: "checkIn="+$(this).val(), // we are sending $_POST['checkIn']
    success: function(){
       // Display the form once AJAX is finished 
       $('#myForm').show();
    }
 });
});

// This function will be called when someone uses the select field
$('.[locationSelect]').change(function(){
  $e = $(this);
  $.ajax({
    type: "POST",
    url: "changeloc.php",
    data: "locationSelect="+$(this).val(),
    success: function(){
       // Display the form once the AJAX is finished 
       alert('Done');
    }
  });
});


</script>

and here is the html:

<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='Check Out'>CheckOut</option>
</select>
</form>


<div class='finished' style='color:#ff0000;'>Checked Out</div>

The problem is that when you hit Check In, the select doesn’t show up. I checked the Chrome Error Console, but no errors came up.

Thanks for all help!

Answer 1

Well, here:

// Display the form once AJAX is finished 
$('#myForm').show();

Should be this:

// Display the form once AJAX is finished 
$('.myForm').show();

Aside from that, verify that your Ajax query returns properly, otherwise this code is not going to run.