使用JS將值自動計算成表單字段

我有6個可在Yii2表單窗口小部件中編輯的字段。我想要做的是一旦我輸入整數值編輯字段自動計算「綠葉淨重」基於給定的輸入。我的編碼是完美的。但問題是，如果我更改字段中的已經輸入值，它將不會更新「綠葉淨重」只讀字段。使用JS將值自動計算成表單字段

$(document).ready(function(){ 
    var A = $('#A'); 
    var B = $('#B'); 
    var C = $('#C'); 
    var D = $('#D'); 
    var E = $('#E'); 

    E.change(function(e){ 
    var result = ((A.val() - B.val()) * C.val())/100; 
    var result2 = ((A.val() - B.val()) * D.val())/100; 
    var final = ((A.val() - B.val()) - result - result2) - E.val(); 
    Math.round(final); 
    $('#F').val(final); 
    }) 

});

我的表單控件編碼（更新碼）

<?php $form = ActiveForm::begin(); ?> 
<?= $form->field($model, 'Gross_weight',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 

     ] 
    ])->textInput(['id' => 'A', **'class' => 'factors'** ]) ?> 

<div class="panel panel-primary" style="padding: 10px;"> 

    <div style="text-align: center; color: #008000;"><b>Deductions</b></div> 

<?= $form->field($model, 'Bags_count',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 
     ] 
    ])->textInput() ?> 

<?= $form->field($model, 'Bags_weight',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 

     ] 
    ])->textInput(['id' => 'B', **'class' => 'factors'** ]) ?> 

<?= $form->field($model, 'Course_leaf',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 

     ] 
    ])->textInput(['id' => 'C', **'class' => 'factors'**]) ?> 

<?= $form->field($model, 'Water',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 

     ] 
    ])->textInput(['id' => 'D', **'class' => 'factors'**]) ?> 

<?= $form->field($model, 'Boiled_leaf',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 

     ] 
    ])->textInput(['id' => 'E',**'class' => 'factors'**]) ?> 
</div> 
<?= $form->field($model, 'Greanleaf_net_weight',[ 
     'feedbackIcon' => [ 
     'default' => 'shopping-cart', 
     'success' => 'ok', 
     'error' => 'exclamation-sign', 
     ] 
    ])->textInput(['disabled' => 'disabled', 'id' => 'F']) ?>

感謝大家。

來源

2016-03-01 asela nuwan

試試這個：'E.change（功能（E）{...}）變化（）' – Rayon

它不工作粘膠 –

在這種情況下，它不工作？忘記了添加jquery庫的 – Rayon

爲了對所有輸入字段的更改執行計算，必須向所有輸入字段添加一個類，並將該類用作change事件的jQuery選擇器。

<input id="A" class="factors" ... /> 
... 
... 

$(".factors").change(function(e) { 
    ... 
    ... 
}

See Demo

來源

2016-03-01 05:53:23

。 –

他已經在使用$來選擇輸入字段。所以我假設他已經包含了jQuery庫。 –

不......我補充說。 –

使用JS將值自動計算成表單字段

回答

相關問題