Yii2: Adding two fields and populating third field on the fly

Question

I am trying to populate a total field with id- #appointment-total_amount using javascript/jquery. Referring this Jsfiddle add two fields together - Which is working fine.

I am using this code in my _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);        
?>

But nothing is happening on the page.

I am not able to see what I am missing here. Thanks.

Related 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">

arogachev · Accepted Answer · 2015-01-21 18:57:57Z

2

The error is in this line:

$('#appointment-total_amount').text(input1 + input2);

Should be:

$('#appointment-total_amount').val(input1 + input2);

Besides that add at least simple check for illegal numbers, because you will get NaN if one of the fields is empty or input value is not valid number. Some range limit will be good too.

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

One more error is in script registration. Change to this:

use yii\web\View;

$this->registerJs($script, View::POS_END);

Otherwise it will be inserted before jQuery (and your script depends on it) and will not be working.

Registering scripts that way is not good practice, it's even mentioned in official documentation. Separate file and using assets is definitely better than struggling with dependencies and inserting js as string (the errors are hard to detect, no autocomplete, etc.).

edited Jan 21, 2015 at 18:57

answered Jan 21, 2015 at 18:12

arogachev

33.6k8 gold badges121 silver badges118 bronze badges

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

6 Comments

Pawan Over a year ago

Hi arogachev - you suggesting it to be like this - $('#appointment-total_amount').val(input1 + input2); and in your code snippet you are using $('#appointment-total_amount').text(totalAmount); is it OK. That is text for val

Pawan Over a year ago

It's still not working @arogachev. can we add some type of alert to check if anything is working.

arogachev Over a year ago

Checked it one more time, works fine. Make sure you have the last version of code, I edited it recently.

Pawan Over a year ago

Hi arogachev - I have checked with ur latest code, but nothing seems to happening.

arogachev Over a year ago

Post it on JsFiddle or Plunker.

|

Collectives™ on Stack Overflow

Yii2: Adding two fields and populating third field on the fly

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related