如何将PHP动态ID传递至Bootstrap确认模态框并实现带ID跳转

点击表格中「移至回收站」按钮会弹出确认模态框，但点击模态框的「确认」按钮时，跳转链接无法携带对应ID，仅显示固定的删除接口路径。尝试过jQuery方案但没搞懂传递ID的逻辑。

触发模态框的按钮代码 #

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#confirmation" data-id="<?=$val['id']?>"><i class="bx bx-trash me-1"></i> Move To Trashcan</a>

确认模态框代码 #

<div class="modal fade" id="confirmation" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel2">Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col mb-3">
            Are you sure want to delete this?
          </div>
          <p id="debug-url"></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary btn-ok" onclick="window.location='http://localhost/NguyenTranTienHiep1/index.php/backend/delTempCat/'">Yes</button>
      </div>
    </div>
  </div>
</div>

渲染按钮的PHP循环代码 #

<?php
if ($data['category'] == NULL)
    echo "<td colspan='5' class='nothing'>THERE IS NOTHING TO SEE IN HERE!</td>";
else
    foreach($data['category'] as $val): ?>
    <tr>
        <td><i class="fab fa-angular fa-lg text-danger me-3"></i>
            <strong><?=$val['id']?></strong>
        </td>
        <td><?=$val['category_name']?></td>
        <td>
            <?php
            if($val['parent']==0)
            {
                echo "<i style='color:#7d8b9b;'>NULL</i>";
            }
            foreach($data['allCat'] as $val1)
            {
                if($val['parent'] == $val1['id'])
                {
                    echo $val1['category_name'];
                }
            }
            ?>
        </td>
        <td>
            <?php
            if ($val['status'] == 1)
                echo "<a href='".LINK."/backend/statusCat/".$val['id']."/0/'><span class='badge bg-label-primary me-1'>Active</span></a>";
            else
                echo "<a href='".LINK."/backend/statusCat/".$val['id']."/1/'><span class='badge bg-label-warning me-1'>Inactive</span></a>";
            ?>
        </td>
        <td>
            <div class="dropdown">
                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                    data-bs-toggle="dropdown">
                    <i class="bx bx-dots-vertical-rounded"></i>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item"
                        href="<?=LINK?>/backend/editCat/<?=$val['id']?>"><i
                            class="bx bx-edit-alt me-1"></i> Edit</a>
                    <a class="dropdown-item"
                        href="<?=LINK?>/backend/delTempCat/<?=$val['id']?>"><i
                            class="bx bx-trash me-1"></i> Move To Trashcan</a>
                </div>
            </div>
        </td>
    </tr>
<?php endforeach;?>

期望效果：点击「Yes」按钮时，跳转链接变为类似onclick="window.location='http://localhost/NguyenTranTienHiep1/index.php/backend/delTempCat/46'"的形式，携带对应ID。

解决方案 #

步骤1：修改模态框确认按钮 #

移除按钮上的硬编码onclick属性，简化按钮代码：

<button type="button" class="btn btn-primary btn-ok">Yes</button>

步骤2：添加JavaScript逻辑捕获动态ID #

在页面底部（或外部JS文件）添加以下代码，利用Bootstrap模态框的事件机制传递ID：

// 监听模态框即将显示的事件
document.getElementById('confirmation').addEventListener('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = event.relatedTarget;
  // 从按钮的data-id属性中拿到动态ID
  const itemId = triggerBtn.getAttribute('data-id');
  // 获取模态框内的确认按钮
  const confirmBtn = this.querySelector('.btn-ok');

  // 给确认按钮绑定跳转逻辑
  confirmBtn.onclick = function() {
    // 拼接带ID的完整删除URL并跳转
    window.location.href = `http://localhost/NguyenTranTienHiep1/index.php/backend/delTempCat/${itemId}`;
  }
});

逻辑说明 #

• Bootstrap的show.bs.modal事件会在模态框显示前触发，event.relatedTarget就是触发模态框的那个「移至回收站」按钮，通过它可以读取按钮上的data-id值。
• 拿到ID后，给确认按钮绑定点击事件，动态拼接跳转URL，确保每次弹出的模态框都对应正确的条目ID。

可选优化：使用PHP常量替代硬编码URL #

如果项目中已有LINK常量（如其他编辑/状态按钮所用），可以先在页面头部定义JS变量：

<script>
const DEL_BASE_URL = '<?=LINK?>/backend/delTempCat/';
</script>

然后将JS中的跳转代码改为：

window.location.href = `${DEL_BASE_URL}${itemId}`;

这样URL更灵活，无需硬写完整路径。

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