將php數據/變量傳遞給模式

Question

我有一些數據正在使用while循環創建（從數據庫生成）。 每組數據都帶有某種形式的id，並向其添加了相應的按鈕。 現在，當我單擊一個按鈕時，我想將與此按鈕相關的數據的id（單個php變量）傳遞給彈出的模態窗口（具有形式），並使其成為輸入字段的值。 到目前為止，這是我的代碼：

來自數據庫的數據：

<?php while ($data = mysqli_fetch_assoc($data_set)) { ?>
<div class="w3-section w3-row w3-card-2">
  <div class="w3-half">
    <div class="apartment-image w3-card-4">
      <header class="w3-container">
        <h4><?php echo $data['data_name']; ?></h4>
      </header>
      <div class="w3-container">
        <img src="<?php echo "images/".$data['Image1']; ?>" class="w3-image" alt="<?php echo $data['dataimgname']; ?>">
      </div>
      <footer class="w3-contanier w3-border-top">
        <div class="w3-border-right">
          <button class="w3-btn w3-btn-block" type="button" name="btnBook" id="modalOpener" onclick="document.getElementById('book').style.display='block';">
            Book or Request Tour
          </button>
        </div>

模態：

<div id="book" class="w3-modal">
<div class="w3-modal-content">
  <header class="w3-container">
    <span onclick="document.getElementById('book').style.display='none'" class="w3-closebtn">
      &times;
    </span>
    <h2>Book or Request Tour</h2>
  </header>
  <div class="w3-container">
    <form class="w3-form" action="bookntour-handler.php" method="post">
      <div class="w3-group">
        <label class="w3-label" for="fullname">Full Name:</label>
        <input class="w3-input" type="text" name="fullname" value="">
      </div>
      <label class="w3-label" for="email">E-mail:</label>
      <input class="w3-input" type="email" name="email" value="">
      <label class="w3-label" for="telephone">Telephone:</label>
      <input class="w3-input" type="text" name="telephone" value="">
      <label class="w3-label" for="dataname">Data Name:</label>
      <input class="w3-input" type="text" name="dataname" value="">
      <div class="w3-group">
        <input class="w3-btn" type="submit" name="btnSubmit" value="Submit">
      </div>
    </form>
  </div>
  <footer>
  </footer>
</div>

就像我之前說的，我想傳遞與按鈕關聯的id，但是在我的代碼中沒有提到“ id”，因此讓我們使用。

<?php echo $data["data_name"]; ?>

當我打開模式窗口時，我希望將此變量作為輸入值：

 <label class="w3-label" for="dataname">Data Name:</label> <input class="w3-input" type="text" name="dataname" value=""> 

到目前為止，我已經研究了幾種選擇，但是對於我來說，其中大多數似乎都是不必要的，或者我根本不理解它們。 喜歡這個 ， 這個 ， 這個 。 這似乎是一個可行的解決方案，但它需要我再次從不需要的數據庫（使用AJAX）中獲取全部數據。 我只想要一個值。

我將W3CSS用於布局並創建模態。 jQuery / JavaScript或PHP（或兩者）中的解決方案將不勝感激。 謝謝！

---

更新

因此，我設法設法解決了部分問題。 我將此功能添加到我的外部JavaScript文件中：

 function showModal() { document.forms["bookntourForm"]["apartmentno"].value = document.getElementsByClassName("modalOpener")[0].getAttribute("value"); document.getElementById('book').style.display='block'; } 

然后，調用上述函數的按鈕的代碼如下所示：

 <button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal()" value="<?php echo $data['data_name']; ?>"> Book or Request Tour </button> 

這帶來了一個新問題。 每當我打開模態時，模態上的<input class="w3-input" type="text" name="dataname" value="">對於所有模態都是相同的，盡管每個按鈕都不同產生。

Answer 1

您可以通過ajax將ID傳遞到后端，並通過使用查詢來檢索有關該ID的必要數據，然后將值設置為成功方法內的必要位置。 如您所說，我不建議使用data_name代替id。 您可以在隱藏字段中設置您的ID並使用它。 因為“ data_name”不是按唯一字段檢索數據的好方法。

Answer 2

我不知道我是否以適當的方式完成了此操作，但這很簡單。 我將按鈕的onclick屬性的值更改為：

  <button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal('<?php echo $apartment["ApartmentNo"]; ?>')"> Book or Request Tour </button> 

現在，外部JS中的showModal（）函數如下所示：

 var aptNo; function showModal(aptNo) { document.forms["bookntourForm"]["apartmentno"].value = aptNo; document.getElementById('book').style.display='block'; } 

現在可以按照我想要的方式工作。