如何将onclick弹窗输入的数据存入数据库？现有代码调试遇阻

UI说明 #

界面包含红色取消按钮，点击后弹出输入框要求填写拒绝理由，目标是将理由存入数据库并更新对应记录状态。

现有代码 #

PHP提交代码 #

if (isset($_POST['rjctrsn-data']) && !empty($_POST['rjctrsn-data'])) {
    $Note = $_POST['rjctrsn-data'];
    $whyreject = 'Rejection_Reason-'.$Note;
    $HclusterApprv = 3;

    $sql = "UPDATE requestitem SET requestitem_UsefulNote=:whyreject, requestitem_Hclusterapprv=:hclstapprv WHERE requestitem_id=:stffid  ";
    $query = $dbh->prepare($sql);
    $query->bindParam(':hclstapprv', $HclusterApprv);
    $query->bindParam(':whyreject', $whyreject);
    $query->bindParam(':stffid', $actid);
    if ($query->execute()) {
        $success = "Rejection Confirmed Successfully and Reason Sent.";
    } else {
        $error = "Sorry, Rejection Failed, Try again Later.";
    }
}

触发弹窗的按钮代码 #

<input type="hidden" id="rjctrsn-data" href="" name="rejection_reason">    
<a type="submit" name="rejectionReason" onclick="document.getElementById('rjctrsn-data').value = prompt('Are you sure you want to Reject this Item ! :', 'Please State Reason for Rection');"
 value="" class="btn btn-xs delete-record" data-id="0">
<span style="font-size:25px" class="glyphicon glyphicon-remove text-danger" style="color:red"></span>
</a>

辅助提交的JS脚本 #

function showRejectionReasonAlert() {
 var rejectionReason = prompt("Please enter the rejection reason:");
 if (rejectionReason != null) {
   document.getElementById("rjctrsn-data").value = rejectionReason;
   document.getElementById("FormId").submit();
 }
}

问题排查与修正方案 #

1. 表单参数名称不匹配 #

PHP接收的参数是$_POST['rjctrsn-data']，但隐藏输入框的name属性为rejection_reason，导致后端无法获取输入值。需将隐藏输入框的name改为rjctrsn-data。

2. 按钮类型无效 #

<a>标签设置type="submit"不生效，无法触发表单提交。应替换为<button>标签，或直接调用JS提交函数。

3. 提交逻辑未关联 #

按钮的onclick仅完成了输入框赋值，未触发表单提交；同时单独定义的showRejectionReasonAlert()函数未被调用，导致数据无法传递到后端。

4. 变量未定义 #

PHP中的$actid变量无定义，SQL执行时会因缺少requestitem_id参数失败，需确保该变量从表单或URL正确获取。

5. 拼写错误 #

弹窗提示中的Rection应为Rejection，避免误导用户。

修正后的完整代码 #

HTML部分 #

<form id="FormId" method="post">
    <!-- 统一参数名称 -->
    <input type="hidden" id="rjctrsn-data" name="rjctrsn-data">
    <!-- 传递要更新的记录ID -->
    <input type="hidden" name="request_id" value="目标记录ID">
    <!-- 使用button标签调用提交函数 -->
    <button type="button" name="rejectionReason" onclick="showRejectionReasonAlert()" class="btn btn-xs delete-record" data-id="0">
        <span style="font-size:25px" class="glyphicon glyphicon-remove text-danger"></span>
    </button>
</form>

JS部分 #

function showRejectionReasonAlert() {
    var rejectionReason = prompt("确定要拒绝该项目吗？请输入拒绝理由：");
    // 增加空值校验
    if (rejectionReason != null && rejectionReason.trim() !== '') {
        document.getElementById("rjctrsn-data").value = rejectionReason.trim();
        document.getElementById("FormId").submit();
    } else {
        alert("请输入有效的拒绝理由");
    }
}

PHP部分 #

// 获取目标记录ID
$actid = isset($_POST['request_id']) ? $_POST['request_id'] : '';

if (isset($_POST['rjctrsn-data']) && !empty($_POST['rjctrsn-data'])) {
    $Note = trim($_POST['rjctrsn-data']);
    $whyreject = 'Rejection_Reason-' . $Note;
    $HclusterApprv = 3;

    // 校验记录ID有效性
    if (empty($actid)) {
        $error = "缺少要更新的记录ID";
    } else {
        $sql = "UPDATE requestitem SET requestitem_UsefulNote=:whyreject, requestitem_Hclusterapprv=:hclstapprv WHERE requestitem_id=:stffid";
        $query = $dbh->prepare($sql);
        $query->bindParam(':hclstapprv', $HclusterApprv);
        $query->bindParam(':whyreject', $whyreject);
        $query->bindParam(':stffid', $actid);
        
        if ($query->execute()) {
            $success = "拒绝已确认，理由已提交。";
        } else {
            // 获取错误信息用于调试
            $errorInfo = $query->errorInfo();
            $error = "拒绝失败，请稍后重试。错误信息：" . $errorInfo[2];
        }
    }
}

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