如何使用JavaScript自动计算数据库来源的库存剩余数值

问题原因 #

你代码的核心问题出在JS对表单元素的取值/赋值逻辑，以及触发事件的选择上，具体问题如下：

• 表单输入框的取值/赋值错误使用了innerHTML属性：input是单标签表单元素，内容存在value属性中，innerHTML读取的是标签内部的HTML内容，对单标签无效
• 触发事件选择错误：onchange事件只有在输入框失去焦点时才会触发，无法实现实时计算效果
• 缺少数值合法性校验：未判断支取数量是否超过总库存、是否为负数，容易出现异常计算结果
• HTML小问题：总库存quantity是从数据库读取的固定值，未设置只读属性，用户可随意修改导致计算异常，同时页面存在重复的update_id隐藏域，且总库存输入框没有填充数据库读取的初始值

修正代码 #

HTML（list.php）修改说明 #

1. 删除重复的update_id隐藏输入框
2. 给总库存quantity输入框添加readonly属性，同时填充数据库读取的库存初始值
3. 将支取数量输入框的onchange="calc()"修改为oninput="calc()"，实现输入时实时计算
   修改后的关键代码段：

<!-- 总库存输入框添加readonly，填充数据库初始值 -->
<div class="form-group">
    <label for="quantity">Quantity</label>
    <input type="number" class="form-control my-2 <?php echo (form_error('quantity') != "") ? 'is-invalid' : '';?>" id="quantity" name="quantity" 
        placeholder="Enter Quantity" value="<?php echo set_value('quantity', $inv['quantity']); ?>" readonly>
    <?php echo form_error('quantity'); ?>
    <span></span>
</div>

<!-- 支取数量输入框修改触发事件为oninput -->
<div class="form-group">
    <label for="used">Withdrawn</label>
    <input type="number" class="form-control my-2 <?php echo (form_error('used') != "") ? 'is-invalid' : '';?>" id="used" name="used" 
        placeholder="Enter No. Withdrawn Items" value="<?php echo set_value('used'); ?>" oninput="calc()">
    <?php echo form_error('used'); ?>
    <span></span>
</div>

JS代码修正 #

function calc() {
    // 读取总库存值，转换为数字，空值默认取0
    const total = Number(document.getElementById("quantity").value) || 0;
    // 读取支取数量，转换为数字，空值默认取0
    const used = Number(document.getElementById("used").value) || 0;

    // 合法性校验：支取数量不能为负，不能超过总库存
    if (used < 0) {
        alert("支取数量不能为负数");
        document.getElementById("used").value = 0;
        return;
    }
    if (used > total) {
        alert("支取数量不能超过总库存");
        document.getElementById("used").value = total;
        return;
    }

    // 计算剩余库存
    const remain = total - used;
    // 给剩余库存输入框赋值，使用value属性
    document.getElementById("rem_qty").value = remain;
}

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