使用JS将值自动计算到表单字段中答案

【问题标题】：Calculate value auto into form field using JS使用JS将值自动计算到表单字段中
【发布时间】：2016-03-01 05:30:10
【问题描述】：

我的 Yii2 表单小部件中有六个可编辑的字段。我想要做的是，一旦我将整数值输入到可编辑字段中，就会根据给定的输入自动计算“绿叶净重”。我的编码工作完美。但问题是，如果我更改字段中已经输入的值，它不会更新“绿叶净重”只读字段。

$(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']) ?>

谢谢大家。

【问题讨论】：

试试这个：E.change(function(e){ ... }).change()
人造丝不起作用
什么情况下不工作？

标签： javascript yii2

【解决方案1】：

为了对所有输入字段的更改执行计算，您必须向所有输入字段添加一个类，并将该类用作更改事件的 jQuery 选择器。

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

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

See Demo

【讨论】：

忘记添加jquery库了。
他已经在使用 $ 来选择输入字段。所以我假设他已经包含了 jQuery 库。
感谢亚历克斯的回答