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：添加两个字段并动态填充第三个字段

1 个答案: