Sending Data from PHP to Javascript to PHP

I don’t understand how to explain my question, but I’m trying to say what I wanted to do.

I have created a modal to submit ‘payment’ for each person. I have created the list of person in a table with PHP loop, and a button against each person so that payment can be done by clicking the button.

When I click on the button, a modal popup. But how do i understand which person button is pressed. There is unique id for each person. Now, I have to sent the id from button click to my PHP code. How can i do that? Code for creating list of person:

while ($row = $result->fetch_assoc()) {
        $sl++;
       echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td><td>"."<button id='mbutton' onclick=btn()>Pay</button><button id='mbutton' onclick=btn()>Report</button>"."</td></tr>";
      }

HTML code for creating the Modal:

  <div id="myModal" class="modal">

  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
     
     <h2>Pay to</h2>
      
    </div>
    <div class="modal-body">
     <form action="test.php" method="POST">
      <label>Payment Amount</label><br>
      <input type="text" name="paymodal" placeholder="Amount"><br>
      <input type="submit" name="smitModal">
     </form>
    </div>
  </div>

</div>

Javascript code for popup the modal:

var modal = document.getElementById("myModal");

var span = document.getElementsByClassName("close")[0];

 function btn() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

I need to sent the respective id & amount from modal code to my PHP code where payment will be processed.

Please help,

Answer

For the “Pay” button, attach a function which gets the ID as a parameter. I assume $sl is the ID you mentioned.

while ($row = $result->fetch_assoc()) {
        $sl++;
       echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td><td>"."<button id='mbutton' onclick=btn(". $sl. ")>Pay</button><button id='mbutton' onclick=btn()>Report</button>"."</td></tr>";
      }

Then, by using the btn() function, Get the ID and add it to the HTML form by using below code:

var modal = document.getElementById("myModal");

var span = document.getElementsByClassName("close")[0];
var formUserId = document.getElementById("userId");

 function btn(userId) {
  formUserId.value = userId;
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Then update your HTML Form to bind the UserId to that:

<div id="myModal" class="modal">

  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
     
     <h2>Pay to</h2>
      
    </div>
    <div class="modal-body">
     <form action="test.php" method="POST">
      <label>Payment Amount</label><br>
      <input type="hidden" id="userId" name="userId"><br>
      <input type="text" name="paymodal" placeholder="Amount"><br>
      <input type="submit" name="smitModal">
     </form>
    </div>
  </div>

</div>