jQuery中输入框预设值时如何自动执行计算函数？

我明白你的问题——当输入框通过PHP预设初始值时，input事件不会自动触发，导致计算逻辑没法自动执行对吧？这是因为input事件只有用户手动修改输入框内容的时候才会被触发，页面加载时通过PHP填充的初始值并不会触发这个事件。

给你两个简单有效的解决办法，任选其一即可：

方法一：页面加载完成后直接调用calculate()函数 #

最直接的方式就是等DOM加载完成后，主动调用一次计算函数。只需要在你的jQuery代码末尾添加以下代码：

// 等DOM加载完成后执行计算
$(document).ready(function() {
    calculate();
});

// 或者更简洁的写法
$(calculate);

方法二：手动触发输入框的input事件 #

如果你希望模拟用户输入的行为（比如你的代码里还有其他依赖input事件的处理逻辑），可以手动触发输入框的input事件：

$(document).ready(function() {
    // 触发两个输入框的input事件，自动执行calculate()
    $('#principal, #interest').trigger('input');
});

完整修改后的代码示例 #

这里是整合了解决方案后的完整代码，你可以直接参考：

JavaScript 代码

$('#principal, #interest').on('input', function() { calculate(); });

function calculate(){
    var principal = $('#principal').val();
    principal = principal.replace(/,/g, "");
    principal = parseInt(principal);
    
    var interest = $('#interest').val();
    interest = interest.replace(/,/g, "");
    interest = parseInt(interest);
    
    var total = "";
    var total_interest = "";
    
    if(isNaN(interest) || isNaN(principal)){
        total_interest = " ";
        total = " ";
    } else{
        total_interest = (interest / 100) * principal;
        total = (interest / 100) * principal + principal;
    }
    
    var num = total;
    num = addCommas(num);
    $('#total').val(num);
    
    var num_interest = total_interest;
    num_interest = addCommas(num_interest);
    $('#total_interest').val(num_interest);
    
    function addCommas(nStr) {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }
}

$('.number').keyup(function(event){
    // skip for arrow keys
    if(event.which >= 37 && event.which <= 40) return;
    
    // format number
    $(this).val(function(index, value) {
        return value
        .replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
});

// 页面加载完成后自动执行计算（核心解决代码）
$(document).ready(function() {
    calculate();
});

HTML 代码（含PHP预设值）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Principal: <input class="form-control number" name="principal" id="principal" type="text" value="<?php print $fetch['principal']; ?>" required/> <br><br>
Interest: <input class="form-control number" name="interest" id="interest" type="text" value="<?php print $fetch['interest']; ?>" required/> <br><br>
Total Interest: <input class="form-control number" name="total_interest" id="total_interest" type="text" readonly/> <br><br>
Total Payment <input class="form-control number" name="total" id="total" type="text" readonly/>

这样修改后，不管输入框是手动输入还是PHP预设初始值，页面加载完成后都会自动执行计算逻辑，无需用户手动点击或编辑输入框。

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