Question 346927 in PHP Versions Question posted in
You can find a list of all versions here.

Php versions – How to Pass a PHP variable from foreach loop to MODAL that is outside the loop

I am working on a modal that should grab the user ID and the user’s full name to display on modal’s header. These are coming from php foreach loop. I need to grab the ID because I am going to store it at another table.

so let say here’s the loop

<?php foreach($users_list as $users) { ?>
<tr>
  <td><?php echo $users['id']; ?></td>
  <td><?php echo $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name']; ?></td>
  <td><a class="ptoModal" href="#ptoModal" data-toggle="modal"><i class="fa fa-plus" title="Add PTO"></i> Set up PTO</a>
</td>
<?php }?>

and here’s the minimized version of my modal

<div class="modal fade" id="ptoModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Set up PTO for <?php echo $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name']; ?></h5>
      </div>
      <div class="modal-body">
        <form class="pto" id="pto" name="pto">
          // form goes here...
          <input type="hidden" name="user_id" id="user_id" class="user_id" value="<?php echo $users['id']?>">
          <input type="hidden" name="action" id="action" class="action" value="pto">
          <button type="submit" class="btn btn-primary mr-2">Insert PTO / SL</button>
        </form>
      </div>
    </div>
  </div>
</div>

here’s what it looks like

enter image description here

Here’s the script on calling the modal

$(document).on("click", ".ptoModal", function (e) {
  //get data-id attribute of the clicked element
  var modalid = $(e.relatedTarget).data('id');  
});

and Finally here’s the script for saving the form from the MODAL

$('form.pto').submit(function (event) {

  var formData = {
    user_id:  $('#user_id').val(),
    earnedPto:$('#earnedPto').val(),
    earnedSl: $('#earnedSl').val(),
    remarks:  $('#remarks').val(),
    action:   $('#action').val()
  };
  var user_id = $(this).data('user_id');
  $.ajax({
      type: 'POST',
      url: site_url + '/create-user/save.php',
      data: formData,
  })
  event.preventDefault();
});

Current situation: I can save the PTO, Sick Leave, and Remarks but not the user_id. At first the Modal is placed inside the foreach loop, my newbie brain thinks it is makes more sense if the modal is included in loop. But the problem is, what ever row I click the variables (full name at the header and ID for the hidden field) displaying on the modal is the info of the first row of the foreach loop.

Now the Modal is resting outside the loop because someone suggested doing it that way.

Now, sorry for the long intro, my question is, how can I display the full name of the employee in the modal and the ID in my hidden field?

I really appreciate any help you can provide.

Tags:

2

Answers


  1. 0

    You can use the click event handler to set the id and the name, just select the cells relative to the clicked element and get their contents

    $(document).on("click", ".ptoModal", function (e) {
  //                   <a>    <td>     <td>  <td>    id
  $('#user_id').val($(this).parent().prev().prev().text());  
  $('#ModalLabel span').text($(this).parent().prev().text());  
});

    Also, change the header to set the name every time you click for the modal.

    <h5 class="modal-title" id="ModalLabel">Set up PTO for <span></span></h5>
    Login or Signup to reply.
  2. 0

    Follow the steps given below

    STEP 1 : Replace your foreach loop with the following foreach loop

    <?php foreach($users_list as $users) {
  $emp_full_name = $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name'];
?>
<tr>
  <td><?php echo $users['id']; ?></td>
  <td><?php echo $users['first_name'] . ' ' . $users['middle_name'] . ' ' . $users['last_name']; ?></td>
  <td><a class="ptoModal" href="javascript:void(0)" data-toggle="modal" onclick="showModal('<?php echo $emp_full_name ?>','<?php echo $users['id']?>')"><i class="fa fa-plus" title="Add PTO"></i> Set up PTO</a>
</td>
<?php }?>

    STEP 2 : Using the following script to call the modal

    function showModal(emp_full_name,userID){

  document.getElementById("ModalLabel").innerText = 'Set up PTO for '+emp_full_name;
  document.getElementById("user_id").value = userID;

  $('#ptoModal').modal('show');

}

    STEP 3 : In your modal, replace the title line with the line given below.

    <h5 class="modal-title" id="ModalLabel"></h5>

    STEP 4 : In your modal, replace the user_id hidden input field line with the line given below.

    <input type="hidden" name="user_id" id="user_id" class="user_id">

    Notes : I assumed you are using Jquery and Bootstrap version < 5

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search