如何将点击弹窗输入框录入的数据存入数据库？

UI展示 #

实现方案 #

1. 前端弹窗与交互代码 #

需搭建弹窗结构、触发逻辑及表单提交逻辑，补全你提供的隐藏输入框配套代码：

<!-- 触发弹窗的按钮 -->
<button id="open-reject-modal">拒绝并填写原因</button>

<!-- 弹窗容器 -->
<div id="reject-modal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:#fff; border:1px solid #ddd; border-radius:4px;">
  <label>拒绝原因：</label>
  <input type="text" id="rejection-reason-input" placeholder="请输入拒绝原因" style="width:100%; margin:8px 0; padding:6px;">
  <div style="text-align:right;">
    <button id="submit-reject" style="margin-right:8px; padding:6px 12px;">确认提交</button>
    <button id="cancel-reject" style="padding:6px 12px;">取消</button>
  </div>
</div>

<!-- 提交表单 -->
<form id="reject-form" method="POST" action="你的PHP处理文件路径.php">
  <input type="hidden" id="rjctrsn-data" name="rejection_reason">
  <!-- 必须添加请求ID字段，用于精准更新单条数据 -->
  <input type="hidden" name="request_id" value="对应请求的ID">
</form>

<script>
// 打开弹窗
document.getElementById('open-reject-modal').addEventListener('click', function() {
  document.getElementById('reject-modal').style.display = 'block';
});

// 取消按钮逻辑
document.getElementById('cancel-reject').addEventListener('click', function() {
  document.getElementById('reject-modal').style.display = 'none';
  document.getElementById('rejection-reason-input').value = '';
});

// 提交按钮逻辑
document.getElementById('submit-reject').addEventListener('click', function() {
  const reason = document.getElementById('rejection-reason-input').value.trim();
  if (!reason) {
    alert('请填写拒绝原因');
    return;
  }
  // 将输入值赋值给隐藏字段
  document.getElementById('rjctrsn-data').value = reason;
  // 提交表单
  document.getElementById('reject-form').submit();
});
</script>

2. PHP后端处理脚本 #

修复你提供的脚本中的SQL注入风险，同时添加精准更新的条件（避免误更新全表数据）：

<?php
// 假设$dbh是已初始化的PDO数据库连接
if (isset($_POST['rejection_reason'], $_POST['request_id'])) {
    $note = $_POST['rejection_reason'];
    $whyReject = 'Rejection_Reason-' . $note;
    $requestId = $_POST['request_id'];

    // 使用预处理语句+参数绑定，彻底防范SQL注入
    $sql = "UPDATE requestitem SET requestitem_UsefulNote = :note WHERE requestitem_id = :id";
    $query = $dbh->prepare($sql);
    $query->bindParam(':note', $whyReject);
    $query->bindParam(':id', $requestId, PDO::PARAM_INT);

    if ($query->execute()) {
        $success = "拒绝已确认，原因已保存。";
    } else {
        $error = "抱歉，拒绝操作失败，请稍后重试。";
    }
}
?>

核心注意事项 #

• SQL注入防护：绝对不能直接将用户输入拼接到SQL语句中，必须使用预处理语句绑定参数
• 精准更新：必须添加WHERE条件指定更新的单条数据，否则会误更新表内所有记录
• 前端验证：提交前先校验输入是否为空，减少无效请求
• 错误排查：可在PHP中添加var_dump($query->errorInfo())，方便定位数据库执行错误

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