將數據從 PHP 發送到 Javascript 到 PHP

Question

我不明白如何解釋我的問題，但我想說我想做什么。

我創建了一個模式來為每個人提交“付款”。 我在一個帶有 PHP 循環的表中創建了人員列表，並針對每個人創建了一個按鈕，以便可以通過單擊該按鈕來完成付款。

當我單擊按鈕時，會彈出一個模態窗口。 但是我如何理解按下了哪個人的按鈕。 每個人都有唯一的ID。 現在，我必須將按鈕單擊的 id 發送到我的 PHP 代碼。 我怎樣才能做到這一點？ 創建人員列表的代碼：

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 代碼：

  <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 代碼：

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";
  }
}

我需要將模態代碼中的相應 ID 和金額發送到將處理付款的 PHP 代碼。

請幫忙，

Answer 1

對於“支付”按鈕，附加一個獲取 ID 作為參數的函數。 我假設$sl是您提到的 ID。

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>";
      }

然后，通過使用btn()函數，使用以下代碼獲取 ID 並將其添加到 HTML 表單中：

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";
  }
}

然后更新您的 HTML 表單以將 UserId 綁定到該表單：

<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>