Laravel框架结合JavaScript实现EFTPOS附加费字段实时更新问题

现有代码问题排查 #

• 元素选择错误：cash/cheque/scholarship三个id绑定的是td标签，不是输入框，无法直接获取输入值
• 变量重名冲突：JS中同时用eftpos作为附加费率变量、EFTPOS显示区域的DOM元素，会导致费率值被覆盖
• 缺少总金额变量：代码中调用了total.value但HTML中没有声明id为total的元素，总金额需要从后端渲染时提前注入到JS中
• 类型未转换：输入框的value默认是字符串格式，直接相加会出现字符串拼接错误，空值需要默认转为0
• 事件监听拼写错误：cheque.onchage拼写错误，正确应为onchange
• 计算逻辑错误：当前逻辑会直接修改费率变量的值，导致后续计算全部错误

修复后的代码 #

HTML部分 #

<table class="table">
    <thead class="text-primary">
        <th class="text-center">Method</th>
        <th class="text-center">Amount</th>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">EFTPOS</td>
            <td class="text-center">$ <input type="number" step="0.01" name="eftpos"></td>
            <!-- 显示区域id重命名为eftpos_display 避免和费率变量冲突 -->
            <td class="text-center"><a id="eftpos_display"> ${{ number_format(($income + $student->AdditionalItems->where('paid', 0)->sum('amount'))*(1+$eftpos), 2)}}</a> - Including Surcharge</td>
        </tr>
        <tr>
            <td class="text-center">Cash</td>
            <td class="text-center">$ <input type="number" step="0.01" name="cash" id="cash_input"></td>
            <td></td>
          </tr>
          <tr>
             <td class="text-center">Cheque</td>
             <td class="text-center">$ <input type="number" step="0.01" name="cheque" id="cheque_input"></td>
             <td></td>
         </tr>
         <tr>
             <td class="text-center">Scholarship</td>
             <td class="text-center">$ <input type="number" step="0.01" name="scholarship" id="scholarship_input"></td>
             <td></td>
         </tr>
     </tbody>
 </table>

JavaScript部分 #

<script type="text/javascript">
window.onload = function () {
    // 从后端注入应付总金额
    const totalPayable = {{ $income + $student->AdditionalItems->where('paid', 0)->sum('amount') }};
    // 获取输入框元素
    const cashInput = document.getElementById('cash_input');
    const chequeInput = document.getElementById('cheque_input');
    const scholarshipInput = document.getElementById('scholarship_input');
    const eftposDisplay = document.getElementById('eftpos_display');
    // 单独声明费率变量 避免重名
    const eftposRate = 1 + {!! json_encode($eftpos, JSON_HEX_TAG) !!};

    const calcEftpos = function(){
        // 字符串转数字 空值默认0
        const cashVal = parseFloat(cashInput.value) || 0;
        const chequeVal = parseFloat(chequeInput.value) || 0;
        const scholarshipVal = parseFloat(scholarshipInput.value) || 0;
        // 计算扣除其他支付方式后的应付额 再算附加费
        const eftposAmount = (totalPayable - cashVal - chequeVal - scholarshipVal) * eftposRate;
        // 保留两位小数显示
        eftposDisplay.innerHTML = '$' + eftposAmount.toFixed(2);
    }

    // 如果需要输入实时触发可以把onchange换成oninput
    cashInput.onchange = calcEftpos;
    chequeInput.onchange = calcEftpos;
    scholarshipInput.onchange = calcEftpos;
}
</script>

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