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

到目前为止，我已经看了几个选项，但在我的情况下，大多数选项似乎都是不必要的，或者我根本就不理解它们。与this和this以及this一样。 This似乎是一个可行的解决方案，但它需要我从数据库（使用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

您可以将您的id通过ajax传递到后端，并使用查询检索有关该ID的必要数据，然后将值设置为success方法中的必要位置。正如你所说，我认为使用data_name而不是id是一个好建议。您可以在隐藏字段中设置您的ID并使用它。因为“data_name”不是通过唯一字段检索数据的好方法。

Answer 2

我不知道我是否以适当的方式做到了这一点，但它就像这样简单。我将按钮的onclick属性的值更改为：

＆＃13;

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

＆＃13;

外部JS中的showModal（）函数现在看起来像这样：

＆＃13;

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

＆＃13;

它现在按照我想要的方式工作。

将php数据/变量传递给模态

更新

2 个答案: