为何"+"按钮无法添加输入值至表格剩余数量?点击仅刷新页面
解决点击"+"提交按钮仅刷新、无法更新表格剩余数量的问题
嘿,我看了你的代码,问题主要出在前端提交逻辑写错,再加上后端可能没做参数校验和正确的更新处理,导致点击按钮只刷新页面,数据根本没传到后端去更新表格。咱们一步步来修:
首先搞定前端的提交问题
你原来的submit按钮写法完全不对:onclick =action = "addQuan.php" 这种语法根本不成立,而且你没把输入框和提交按钮放在<form>标签里,点击submit时浏览器只是刷新页面,根本没把输入的数值和必要参数传给后端。
修正后的前端代码应该是这样的:
<!-- 用form包裹所有需要提交的元素,指定POST方法和处理脚本 --> <form method="POST" action="addQuan.php"> <!-- 注意:后端用到了$_POST['memi']和$_POST['code'],所以必须添加这两个参数的隐藏域(如果用户不需要手动输入的话) --> <input type="hidden" name="memi" value="这里替换成实际的memi值"> <input type="hidden" name="code" value="这里替换成实际的code值"> <input type="number" size="2" title="Input value" placeholder="0" id="doni" name="Value" required maxlength="4" /> <input type="submit" value="+" name="button" title="Add" /> </form>
解释下:
<form>标签会把里面所有带name属性的控件值,通过POST方法发送到addQuan.php,不需要错误的onclick写法。- 隐藏域
memi和code是后端必须的参数,你得把它们的value换成实际业务中的对应值(比如从当前页面的URL、表格行里获取)。
然后修正后端的处理逻辑
你的后端代码片段不完整,我帮你补全并加上必要的校验和安全处理(重点防SQL注入!):
<?php include('connect.php'); // 先检查所有必要参数是否都传过来了,避免报错 if(isset($_POST['memi'], $_POST['code'], $_POST['Value'])){ $id = $_POST['memi']; $product_code = $_POST['code']; $add_num = $_POST['Value']; // 用预处理语句防止SQL注入,绝对不能直接把用户输入拼进SQL! // 假设你的表名为products,剩余数量字段是remaining_quantity,根据你的实际表结构调整 $stmt = $conn->prepare("UPDATE products SET remaining_quantity = remaining_quantity + ? WHERE code = ? AND id = ?"); // 绑定参数:"isi" 对应 整数(add_num)、字符串(product_code)、整数(id),根据你的字段类型调整 $stmt->bind_param("isi", $add_num, $product_code, $id); if($stmt->execute()){ // 更新成功后跳回原页面,用户就不会停留在处理脚本页面了 header("Location: 你的原页面URL.php"); exit(); } else { echo "更新失败:" . $stmt->error; } $stmt->close(); $conn->close(); } else { echo "缺少必要的参数,请检查"; } ?>
这里要注意:
- 一定要用预处理语句,不然会有SQL注入风险,这是后端开发的基本安全要求。
- 更新成功后用
header跳转回原页面,这样用户看起来就是页面刷新后数值更新了(或者你也可以用AJAX实现无刷新更新,下面说)。
进阶:实现无刷新更新(页面不刷新)
如果不想让页面刷新,用AJAX提交会更友好,前端代码改成这样:
<input type="number" size="2" title="Input value" placeholder="0" id="doni" name="Value" required maxlength="4" /> <input type="button" value="+" name="button" title="Add" onclick="addQuantity()" /> <script> function addQuantity() { const inputNum = document.getElementById('doni').value; // 这里替换成实际获取memi和code的方式,比如从表格行的data属性里拿 const memi = "实际的memi值"; const code = "实际的code值"; // 用fetch发送POST请求 fetch('addQuan.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `memi=${memi}&code=${code}&Value=${inputNum}` }) .then(response => response.text()) .then(data => { // 更新页面上的表格剩余数量,比如找到对应的单元格ID const quantityCell = document.getElementById('剩余数量单元格的ID'); quantityCell.textContent = parseInt(quantityCell.textContent) + parseInt(inputNum); // 清空输入框 document.getElementById('doni').value = 0; }) .catch(error => console.error('提交出错:', error)); } </script>
这种方式点击按钮后页面不会刷新,直接更新表格里的数值,用户体验更好。
内容的提问来源于stack exchange,提问作者dini dinida




