替代方式（.on（输入，功能））

Question

我遇到了这个问题。我的代码工作正常但我用它来更新然后现在我有一个问题，因为已经设置了值。

在此代码中：

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

当您在字段上输入值时，它会起作用。但是如果我有这个代码怎么办：

<input class="form-control number" name="principal" id="principal" type="text"  value="<?php print $fetch['principal']; ?>" required/>

<input class="form-control number" name="interest" id="interest" type="text" value="<?php print $fetch['interest']; ?>" required/>

已设定值。我应该在JQUERY中使用什么代码来执行没有类型的代码或从输入字段编辑值。

示例输出：编辑Principal的值（我想要的是在不点击或编辑内容的情况下运行计算）

    $('#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, ",");
        });
    });

<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="9000" required/>
<br><br>
Interest:
<input class="form-control number" name="interest" id="interest" type="text" value="10" 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/>

Answer 1

只需这样做：

calculate();

...在脚本顶层的代码中。确保您的脚本位于body的末尾，就在结束</body>标记之前。

示例：

＆＃13;

＆＃13;

function calculate() {
  console.log(
    "calculating with " +
    $("#principal").val() +
    " and " +
    $("#interest").val()
  );
}

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

calculate();

＆＃13;

<input class="form-control number" name="principal" id="principal" type="text"  value="42" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="3.7" required/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

附注：您可以简化和合并on来电：

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

＆＃13;

＆＃13;

function calculate() {
  console.log(
    "calculating with " +
    $("#principal").val() +
    " and " +
    $("#interest").val()
  );
}

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

calculate();

＆＃13;

<input class="form-control number" name="principal" id="principal" type="text"  value="42" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="3.7" required/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

这是您添加到答案中的代码段

calculate();

...添加到最后：

＆＃13;

＆＃13;

$('#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, ",");
        });
    });
calculate();

＆＃13;

<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="9000" required/>
<br><br>
Interest:
<input class="form-control number" name="interest" id="interest" type="text" value="10" 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/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以从服务器计算结果

所以从PHP端执行calculate（）方法并将其打印到结果字段中。就像你对这些值所做的那样，或是从js。

加载代码之后

或者您可以使用jQuery触发器

$(document).ready(function () {
    $('#principal').trigger('input');
    $('#interest').trigger('input');
}