表单字段无法自动求和与计算，如何恢复该自动功能？

问题原因 #

原代码存在以下导致功能失效或体验不佳的问题：

• 仅监听change事件：数字输入框通过键盘输入时，只有失去焦点才会触发更新，实时输入时无反应，容易让用户误以为功能失效
• 硬编码输入框ID：JS代码固定了numStudents1到numStudents5的ID，若后续PHP循环的教师数量调整，JS需要同步修改，扩展性差
• 未做值校验：虽然Number()会将空值转为0，但显式处理非数字输入能避免潜在异常

修复后的完整代码 #

<?php
    $i=1;
    while($i <= 5){
?>

<div class="form-group">
    <div class="row">
        <div class="col-md-3">
            <label for="teacher<?php echo $i; ?>">Teacher <?php echo $i; ?>:</label>
            <input type="text" class="form-control" name="teacher<?php echo $i; ?>" id="teacher<?php echo $i; ?>">
        </div>
        
        <div class="col-md-2">
            <label for="grade<?php echo $i; ?>">Grade:</label>
            <input type="number" min="0" max="13" name="grade<?php echo $i; ?>" id="grade<?php echo $i; ?>" class="form-control" value="0">
        </div>

        <div class="col-md-2">
            <label for="numStudents<?php echo $i; ?>"># of students:</label>
            <input type="number" min="0" max="100" name="numStudents<?php echo $i; ?>" id="numStudents<?php echo $i; ?>" class="form-control studentsNum" value="0">
        </div>
    </div>
</div>
        
<?php $i++;} ?>
        
<div class="row">
    <div class="col-md-2 col-md-offset-5">
        <div class="form-group">
            <label for="totalStudents">Total # of Students:</label>
            <input type="number" name="totalStudents" id="totalStudents" value="0" min="0" max="100000" class="form-control">
        </div>
    </div>
</div>
        
<div class="row">
    <div class="col-md-7">
        <div class="pull-right">
            <label for="balanceDue"><span class="text-danger">Bring this amount to the event</span><br>Balance due @ $5/Student:</label>
        </div>
    </div>
</div>
        
<div class="row">
    <div class="col-md-2 col-md-offset-5">
        <div class="input-group">
            <input type="number" name="balanceDue" id="balanceDue" value="0" min="0" max="10000000" class="form-control">
            <span class="input-group-addon">$</span>
        </div>
    </div>
</div>
            
<script>
    $(document).ready(function() {
        // 监听所有学生数量输入框的实时输入事件
        $("input.studentsNum").on('input', function(){
            let total = 0;
            // 遍历所有学生数量输入框，累加数值
            $("input.studentsNum").each(function(){
                // 处理空值或非数字，转为0
                const value = parseInt($(this).val()) || 0;
                total += value;
            });
            // 更新总学生数
            $("#totalStudents").val(total);
            // 计算并更新应付金额
            const moneyTotal = total * 5;
            $("#balanceDue").val(moneyTotal);
        });
    });
</script>

关键修改点 #

• 将事件监听从change改为input，实现实时输入实时更新
• 用each()遍历所有带studentsNum类的输入框，动态计算总和，不再依赖固定ID
• 用parseInt(val) || 0处理空值和非数字输入，确保计算稳定

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