You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

为何"+"按钮无法添加输入值至表格剩余数量?点击仅刷新页面

解决点击"+"提交按钮仅刷新、无法更新表格剩余数量的问题

嘿,我看了你的代码,问题主要出在前端提交逻辑写错,再加上后端可能没做参数校验和正确的更新处理,导致点击按钮只刷新页面,数据根本没传到后端去更新表格。咱们一步步来修:

首先搞定前端的提交问题

你原来的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写法。
  • 隐藏域memicode是后端必须的参数,你得把它们的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

火山引擎 最新活动