使用JavaScript和PHP传递隐藏ID值时仅首条记录正常其余报错的问题

兄弟，我一眼就瞅出问题所在了——你在循环里给所有隐藏输入框用了同一个id="hidden_user_id"，但HTML里的id是唯一标识啊！浏览器只会识别第一个带这个id的元素，后面的都被直接忽略了，这就导致只有第一条记录能正常传值，其他记录自然会报错。

下面给你两种针对性的解决思路，根据你的实际使用场景选就行：

方案1：用独立表单提交单条记录 #

如果是通过表单提交每条记录的id，把每条记录的内容包裹在独立的<form>标签里，每个表单里的隐藏input可以用相同的name（name允许重复），id可以直接去掉或者改成动态唯一值。

示例代码：

$sql = "SELECT id,jdes,title FROM job";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // 输出每一行数据
    while($row = $result->fetch_assoc()) {
?>
<form action="你的目标页面.php" method="post">
    <input type="hidden" name="user_id" value="<?php echo $row["id"] ?>">
    <h3><?php echo $row["title"] ?>:</h3>
    <p><?php echo $row["jdes"] ?></p>
    <button type="submit">处理这条记录</button>
</form>
<?php
    }
}

提交后，目标页面直接用$_POST['user_id']就能拿到当前提交的那条记录的id。

方案2：用自定义属性配合JavaScript处理 #

如果是通过点击事件（比如点击标题/按钮）触发传值，给每个触发元素添加自定义data-id属性存储id，然后通过JS获取这个属性值，完全避开重复id的问题。

示例代码：

$sql = "SELECT id,jdes,title FROM job";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
?>
<div class="job-item">
    <h3 class="job-title" data-id="<?php echo $row["id"] ?>"><?php echo $row["title"] ?>:</h3>
    <p><?php echo $row["jdes"] ?></p>
    <button class="operate-btn" data-id="<?php echo $row["id"] ?>">操作</button>
</div>
<?php
    }
}

对应的JS代码：

// 给所有操作按钮绑定点击事件
document.querySelectorAll('.operate-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const userId = this.getAttribute('data-id');
        // 这里可以选择跳转并携带参数
        window.location.href = '目标页面.php?id=' + userId;
        // 或者用本地存储暂存id再跳转
        // localStorage.setItem('currentJobId', userId);
        // window.location.href = '目标页面.php';
    });
});

目标页面可以通过$_GET['id']（或从本地存储读取）拿到对应的记录id。

核心思路就是：绝对不要在循环里重复使用同一个id，要么用独立表单+name，要么用自定义data属性配合JS，这样每条记录的隐藏值都能正确传递啦。

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