Calculate value auto into form field using JS

Question

I have six fields which are editable in my Yii2 form widget. What i want to do is once i input integer values into editable fields calculate "Green leaf net weight" automatically based on the given input. my coding are work perfectly. But the problem is if i change already input value in the fields it'll not update the the "Green leaf net weight" read only field.

$(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);
   })

 });

my form widget coding (updated code)

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

Thanks for everyone.

Try this: E.change(function(e){ ... }).change()

Rayon
– Rayon

2016-03-01 05:37:16 +00:00
Commented Mar 1, 2016 at 5:37 — Rayon
– Rayon, Commented Mar 1, 2016 at 5:37
It's not working Rayon

asela daskon
– asela daskon

2016-03-01 05:53:01 +00:00
Commented Mar 1, 2016 at 5:53 — asela daskon
– asela daskon, Commented Mar 1, 2016 at 5:53
In which case it is not working ?

Rayon
– Rayon

2016-03-01 05:54:03 +00:00
Commented Mar 1, 2016 at 5:54 — Rayon
– Rayon, Commented Mar 1, 2016 at 5:54

Insane Skull · Accepted Answer · 2016-03-01 06:01:22Z

1

Inorder to execute the calculation on the change of all the input fields you have to add a class to all the input fields and use that class as the jQuery selector for change event.

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

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

See Demo

edited Mar 1, 2016 at 6:01

Insane Skull

9,3619 gold badges49 silver badges66 bronze badges

answered Mar 1, 2016 at 5:53

Alex Jose

5641 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Insane Skull Over a year ago

forgotten to add jquery library.

Alex Jose Over a year ago

he is already using $ for selecting the input fields. So I am assuming he has included the jQuery library already.

asela daskon Over a year ago

Thanks Alex for your answer

Collectives™ on Stack Overflow

Calculate value auto into form field using JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related