如何将HTML表单自动计算的总分、平均分、等级存入MySQL数据库

问题根因 #

你当前计算出来的总分、平均分、等级是直接写入普通<td>标签的文本内容中，表单提交时只会上传带有name属性的表单控件（<input>/<select>/<textarea>等）的值，普通标签的内容不会被后端接收，因此无法写入数据库。

解决方案 #

方案1：前端新增隐藏表单字段提交 #

修改HTML代码，在对应列中新增隐藏的input元素：

<table class="input-table">
<tr>
    <th><?php echo htmlentities($row['SubjectName']); ?></th>
    <th><?php echo htmlentities($row['SubjectName']); ?></th>
    <th><?php echo htmlentities($row['SubjectName']); ?></th>
    <th>Total</th>
    <th>Average</th>
    <th>Grade</th>
    <th>Remark</th>
</tr>
<tr class="input-table">
    <td>
        <input id="input1" class="input" type="number" value="0" name="input1[]">
    </td>
    <td>
        <input id="input2" class="input" type="number" value="0" name="input2[]">
    </td>
    <td>
        <input id="input3" class="input" type="number" value="0" name="input3[]">
    </td>
    <td class="total">
        <input type="hidden" name="total[]">
    </td>
    <td class="ave">
        <input type="hidden" name="average[]">
    </td>
    <td class="grade">
        <input type="hidden" name="grade[]">
    </td>
    <td class="remark"></td>
</tr>
</table>

修改JS的evaluate函数，在赋值展示值的同时给隐藏字段赋值：

if (size(values) === 3) {
    average = total / 3;
    grade = checkGrade(average);
    gradeMessage = $('<div></div>').text(grade);
    if (gradeColors[grade]) {
        gradeMessage.addClass(gradeColors[grade]);
    }
    $group.find('.grade').empty().html(gradeMessage);
    $group.find('.grade input').val(grade); // 新增赋值代码
    $group.find('.total').text(total);
    $group.find('.total input').val(total); // 新增赋值代码
    $group.find('.ave').text(average);
    $group.find('.ave input').val(average); // 新增赋值代码
}

修改完成后提交表单时，三个字段的值就会和输入的三个分数一起发送到后端。

方案2：后端直接计算（更推荐） #

前端计算的结果存在被用户篡改的风险，更稳妥的方式是后端接收到input1、input2、input3的值后，自行计算总分、平均分和等级，再写入数据库，不需要修改前端代码。

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