CODEWITHSUNDEEP
javascriptjqueryhtml
Muhambi
Muhambi

Reputation: 3522

Issue with show/hide form elements

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!

Upvotes: 1

Views: 243

Answers (2)

Jay Rizzi
Jay Rizzi

Reputation: 4304

You may want to consider placing error handling on your ajax calls to see if they are returning correctly

 success: function(){
  alert('done');
 },
 error: function(request){
  alert(request.responseText);
 }

this will help troubleshooting whether its an ajax issue or related to something else , like syntax

Upvotes: 0

Rafael
Rafael

Reputation: 2817

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.

Upvotes: 3

Related Questions