如何在Bootstrap模态框中显示PHP foreach循环的对应记录值

问题场景 #

在PHP foreach循环中展示多条品牌数据，点击每条记录的「Email」按钮打开Bootstrap模态框时，模态框始终显示循环最后一条记录的内容，无法匹配当前点击的记录。

问题原因 #

所有按钮都绑定了同一个ID的模态框（#myModalmail2brand），Bootstrap在处理时只会识别最后一个匹配该ID的元素，导致无法区分触发源对应的记录。

解决方案一：使用Data属性+JavaScript传递数据（推荐） #

这种方法只需要一个模态框，通过data-*属性传递当前记录的关键信息，再用JavaScript动态填充模态框内容，性能更优。

修改后的代码 #

循环部分（按钮添加Data属性）

<?php foreach($result as $row) { ?>
    <div class="card-body">
        <h2 class="fw-light text-center"><?php echo htmlspecialchars($row['vbrandname']); ?></h2>
        <p class="card-text"><?php echo htmlspecialchars($row['vaboutbrand']); ?></p>
        <p class="card-text"><?php echo htmlspecialchars($row['vwebsitelink']); ?></p>
        <p class="card-text"><?php echo htmlspecialchars($row['contactemail']); ?></p>
        <!-- 添加data属性传递当前品牌的唯一标识及信息 -->
        <button type="button" class="btn btn-sm btn-warning" 
                data-bs-toggle="modal" 
                data-bs-target="#myModalmail2brand"
                data-brand-id="<?php echo $row['id']; ?>"
                data-brand-email="<?php echo htmlspecialchars($row['contactemail']); ?>"
                data-brand-name="<?php echo htmlspecialchars($row['vbrandname']); ?>">
                Email
        </button>
    </div>
 <?php } ?>

模态框部分（添加动态填充的元素）

<div class="modal fade" id="myModalmail2brand" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Send Mail to <span id="brand-name"></span></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <form class="form-inline" action="" method="post" >
            <!-- 隐藏域存储当前品牌ID，用于后端处理 -->
            <input type="hidden" name="brand_id" id="brand-id">
            <input type="hidden" name="brand_email" id="brand-email">
            
            <div class="mb-3">
              <label for="exampleFormControlInput1" class="form-label">Your Email address</label>
              <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" name="your_email" required>
            </div>
            <div class="mb-3">
              <label for="exampleFormControlTextarea1" class="form-label">Your Query</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="query" required></textarea>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" required name="remember" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">Confirm Your Data</label>
            </div>
            <button type="submit" name="submitmail2brand" class="btn btn-primary" >Send</button>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
      </div>
    </div>
  </div>
</div>

JavaScript部分（监听模态框显示事件）

// 监听模态框即将显示的事件
document.getElementById('myModalmail2brand').addEventListener('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = event.relatedTarget;
  // 从data属性中提取当前品牌的信息
  const brandId = triggerBtn.getAttribute('data-brand-id');
  const brandEmail = triggerBtn.getAttribute('data-brand-email');
  const brandName = triggerBtn.getAttribute('data-brand-name');
  
  // 将数据填充到模态框的对应元素中
  document.getElementById('brand-id').value = brandId;
  document.getElementById('brand-email').value = brandEmail;
  document.getElementById('brand-name').textContent = brandName;
});

关键说明 #

• 使用htmlspecialchars()转义输出内容，防止XSS攻击。
• 通过show.bs.modal事件在模态框显示前加载数据，确保每次打开都是当前点击记录的内容。
• 隐藏域存储品牌ID和邮箱，方便后端处理邮件发送逻辑。

解决方案二：为每条记录生成独立模态框（适合小数据量） #

给每个模态框生成唯一ID，点击按钮时打开对应ID的模态框，不需要额外JavaScript，但会生成大量重复DOM元素。

<?php foreach($result as $row) { ?>
    <div class="card-body">
        <h2 class="fw-light text-center"><?php echo htmlspecialchars($row['vbrandname']); ?></h2>
        <p class="card-text"><?php echo htmlspecialchars($row['vaboutbrand']); ?></p>
        <p class="card-text"><?php echo htmlspecialchars($row['vwebsitelink']); ?></p>
        <p class="card-text"><?php echo htmlspecialchars($row['contactemail']); ?></p>
        <!-- 绑定到当前记录的模态框ID -->
        <button type="button" class="btn btn-sm btn-warning" 
                data-bs-toggle="modal" 
                data-bs-target="#myModalmail2brand-<?php echo $row['id']; ?>">
                Email
        </button>
    </div>

    <!-- 每条记录对应独立的模态框 -->
    <div class="modal fade" id="myModalmail2brand-<?php echo $row['id']; ?>" tabindex="-1" aria-labelledby="modalLabel-<?php echo $row['id']; ?>" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="modalLabel-<?php echo $row['id']; ?>">Send Mail to <?php echo htmlspecialchars($row['vbrandname']); ?></h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              <form class="form-inline" action="" method="post" >
                <input type="hidden" name="brand_id" value="<?php echo $row['id']; ?>">
                <input type="hidden" name="brand_email" value="<?php echo htmlspecialchars($row['contactemail']); ?>">
                
                <!-- 表单内容同之前 -->
                <div class="mb-3">
                  <label for="email-<?php echo $row['id']; ?>" class="form-label">Your Email address</label>
                  <input type="email" class="form-control" id="email-<?php echo $row['id']; ?>" placeholder="name@example.com" name="your_email" required>
                </div>
                <div class="mb-3">
                  <label for="query-<?php echo $row['id']; ?>" class="form-label">Your Query</label>
                  <textarea class="form-control" id="query-<?php echo $row['id']; ?>" rows="3" name="query" required></textarea>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" required name="remember" value="" id="check-<?php echo $row['id']; ?>">
                  <label class="form-check-label" for="check-<?php echo $row['id']; ?>">Confirm Your Data</label>
                </div>
                <button type="submit" name="submitmail2brand" class="btn btn-primary" >Send</button>
              </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
          </div>
        </div>
      </div>
    </div>
 <?php } ?>

关键说明 #

• 每个模态框的ID和表单元素ID都要唯一，避免冲突。
• 适合数据量较小的场景，数据量大时会增加页面加载时间和DOM体积。

内容的提问来源于stack exchange，提问作者P Sinha