CODEWITHSUNDEEP
javascriptjqueryhtml
Muhambi
Muhambi

Reputation: 3522

Distinguish multiple sets of forms

I have an application that looks like this:

) Next to Patient X's name is a button labeled Check In. This is logged in the server side.

2) Upon clicking the Check In button , the user is then presented with a dropdown (replacing the initial button) with the multiple locations the user could choose. Upon selecting a location from the select, the server side is updated again.

3) The user then might decide to choose multiple locations, repeating step 2

4) At the end, when the user is done selecting locations, he clicks on the Check Out button in the same select where the user had clicked locations in steps 2 and 3, titled Check Out. Upon clicking this, it is sent to checkloc.php and logged.

5) Finally, the dropdown dissapears and the words Checked Out appear.

Now, the problem is that there are many patients on a page (Patient A, Patient B, C, D, and so on). With one patient on the page, the process worked just like the steps above.

Unfortunately, when you have more than one patient on the page, if you (for example) click the Check In button next to Patient A, two dropdowns appear, one for Patient A (like it should) and one for patient B, even though no one ever clicked the Check In button next to the name.

Here's my code:

html:

<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="0">Select a location</option>
  <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>
 </select>
</form>

<button class="checkOut" data-param="cbutton_1">Check Out</button>
<div class='finished' style='color:#ff0000;'>Checked Out</div>

<!--START SECOND SET-->

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

<form method='post' class='myForm' action=''>
 <select name='locationSelect' class='locationSelect' data-param='location_2'>
  <option value="0">Select a location</option>
  <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>
 </select>
</form>

<button class="checkOut" data-param="cbutton_2">Check Out</button>
<div class='finished' style='color:#ff0000;'>Checked Out</div>

and javascript/jquery

 <script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();  // Hide all Selects on screen
$('.finished').hide();        // Hide all checked Out divs on screen
$('.checkOut').hide();

$('.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: "checkin.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...
            $('.locationSelect').show();
            $('.checkOut').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
        }
    });
});

$('.checkOut').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: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            $('.locationSelect').hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.finished').show();
        }
    });
});

});
</script>

Thanks for any and all help, and if you need any more details or clarifications just ask!

Upvotes: 0

Views: 56

Answers (1)

nnnnnn
nnnnnn

Reputation: 150050

The problem is that your selector $('.locationSelect') gets all elements with that class. You need a way to narrow it down to the right one.

The easiest way would be to change your html slightly to wrap each group of controls in its own div or other container (perhaps in li elements within a ul):

<div class="container">
    <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="0">Select a location</option>
      <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>
     </select>
    </form>    
    <button class="checkOut" data-param="cbutton_1">Check Out</button>
    <div class='finished' style='color:#ff0000;'>Checked Out</div>
</div>

Then you could do this:

        // Hide the current Button clicked
        $e.hide();
        // get the current button's containing div
        var $container = $e.closest("div.container");
        // Get the immediate form for the button
        // find the select inside it and show...
        $container.find('.locationSelect').show();
        $container.find('.checkOut').show();

...and the same thing within the checkout click handler.

Note that you don't need to add new div containers if each group of controls is already within its own container, for example if you already have them inside individual <li> elements or table cells or something then you could use $container = $e.closest("li")...

Upvotes: 1

Related Questions