Yii2：添加两个字段并动态填充第三个字段

Question

我正在尝试使用 javascript/jquery 填充 ID 为 #appointment-total_amount 的总计字段。参考这个 Jsfiddle add two fields together - 工作正常。

我在 _form.php

中使用此代码

<?php
$script = <<<EOD
$(function() {
     $('#appointment-doctor_fee').keyup(function() {  
        updateTotal();
    });

    $('#appointment-discount').keyup(function() {  
        updateTotal();
    });

    var updateTotal = function () {
      var input1 = parseInt($('#appointment-doctor_fee').val());
      var input2 = parseInt($('#appointment-discount').val());
      $('#appointment-total_amount').text(input1 + input2);
    };

 });
EOD;
$this->registerJs($script);        
?>

但是页面上没有任何反应。

我看不到我在这里遗漏了什么。谢谢

相关HTML

<div class="form-group field-appointment-doctor_fee">
<label class="control-label" for="appointment-doctor_fee">Doctor Fee</label>
<input type="text" id="appointment-doctor_fee" class="form-control" name="Appointment[doctor_fee]" maxlength="10">
</div>


<div class="form-group field-appointment-discount">
<label class="control-label" for="appointment-discount">Discount</label>
<input type="text" id="appointment-discount" class="form-control" name="Appointment[discount]" maxlength="10">

<div class="form-group field-appointment-total_amount">
<label class="control-label" for="appointment-total_amount">Total Amount</label>
<input type="text" id="appointment-total_amount" class="form-control" name="Appointment[total_amount]" maxlength="10">

Answer 1

错误在这一行：

$('#appointment-total_amount').text(input1 + input2);

应该是：

$('#appointment-total_amount').val(input1 + input2);

此外，至少要添加对非法数字的简单检查，因为如果其中一个字段为空或输入值不是有效数字，您将得到 NaN。一些范围限制也会很好。

var updateTotal = function () {
    var doctorFee = parseInt($('#appointment-doctor_fee').val());
    var discount = parseInt($('#appointment-discount').val());
    var totalAmount = doctorFee + discount;

    if (isNaN(totalAmount) || totalAmount < 0 || totalAmount > 100000) {
        totalAmount = '';
    }

    $('#appointment-total_amount').val(totalAmount);
};

另一个错误是脚本注册。更改为：

use yii\web\View;

$this->registerJs($script, View::POS_END);

否则它将被插入到 jQuery 之前（并且您的脚本依赖于它）并且将无法工作。

以这种方式注册脚本不是一个好习惯，甚至在官方文档中也提到过。单独的文件并使用 assets 绝对比挣扎于依赖关系并将 js 作为字符串插入更好（错误难以检测，没有自动完成等）。

Yii2：添加两个字段并动态填充第三个字段

Yii2: Adding two fields and populating third field on the fly

javascript

php

jquery

yii2