Yii2:Sum 三个输入字段并将结果分配给第四个

Question

我有四个字段，如代码所示。我想对 night_firsthotel、night_secondhotel、night_thirdhotel 求和并将结果分配给 total_night.

我该怎么做？

<?= $form->field($model, 'nights_firsthotel')->dropDownList(range(1, 10)); ?>
<?= $form->field($model, 'nights_secondhotel')->dropDownList(range(1, 10)); ?>
<?= $form->field($model, 'nights_thirdhotel')->dropDownList(range(1, 10));  ?>
<?= $form->field($model, 'total_nights')->textInput(['readOnly'=> true]) ?>

Answer 1

试试这个首先，您需要为输入下拉列表设置一个 ID，如果有，您可以更改我写的 ID 并放置您的 ID。

其次，您需要使用 JS 访问它并对值求和并设置为 "total_nights" 输入。

我写了代码，但我没有证明。试着告诉我

<?= $form->field($model, 'nights_firsthotel')->dropDownList(range(1, 10) ,    ['id'=>'nights_firsthotel']); ?>
<?= $form->field($model, 'nights_secondhotel')->dropDownList(range(1, 10),    ['id'=>'nights_secondhotel']); ?>
<?= $form->field($model, 'nights_thirdhotel')->dropDownList(range(1, 10),    ['id'=>'nights_thirdhotel']);  ?>
<?= $form->field($model, 'total_nights')->textInput(['readOnly'=> true,'id'=>'total_nights']) ?>

$(document).ready(function () {
    $("select").change(function () {

        var nights_firsthotel = document.getElementById("nights_firsthotel").value;
        var nights_secondhotel = document.getElementById("nights_secondhotel").value;
        var nights_thirdhotel = document.getElementById("nights_thirdhotel").value;
        var total_nights = document.getElementById("total_nights");
        total_nights.val(nights_firsthotel+nights_secondhotel+nights_thirdhotel);
    });
});

Answer 2

$nights_firsthotel = Html::getInputID($model, 'nights_firsthotel');
$nights_secondhotel = Html::getInputID($model, 'nights_secondhotel');
$nights_thirdhotel = Html::getInputID($model, 'nights_thirdhotel');
$total_nights = Html::getInputID($model, 'total_nights');

$this->registerJs(<<<JS
    $(document).ready(function(){
        $("select").change(function () {
            var total_nights = 0;
            total_nights += parseInt($('#$nights_firsthotel').val()) || 0;
            total_nights += parseInt($('#$nights_secondhotel').val()) || 0;
            total_nights += parseInt($('#$nights_thirdhotel').val()) || 0;

            $('#$total_nights').val(total_nights);
        });
    });
JS
);

Yii2:Sum 三个输入字段并将结果分配给第四个

Yii2:Sum three input fields and assign result to fourth one

forms

sum

yii2

yii2-advanced-app