Change one field value by changing another field value [duplicate]

Question

Two input fields total_bill & delivery_charge_bill.

total_bill field already have a value, now I want that when I input some value into delivery_charge field that will change the total_bill field's value.

Suppose total_bill field's value is 200.

Now I input 20 into delivery_charge field and that will effect the total_bill field and the value will be 220.

For any type of changes of delivery_charge field it will change the value of total_bill field.

But for myself it will not change perfectly.

Suppose total_bill is 200

when input delivery_charge = 2

total_bill = 202

when input delivery_charge = 20

total_bill = 2020

Here is my code detail

html

<h4>Grand Total : <input type="number" id="total_bill" readonly class="form-control total_amount" value="0.00"></h4>

<input type="text" name="delivery_charge" id="delivery_charge" class="form-control">

js

$('#delivery_charge').keyup(function(event) {
            var total_amount = $('.total_amount').val();
            var delivery_charge = $(this).val();
            var grand_total_amount = total_amount + delivery_charge;
            $('.total_amount').val(grand_total_amount);
});

Anybody help please? Thanks in advance.

Answer 1

If you use change event then it can be solved easily.

$('#delivery_charge').on('change',function() {
            var total_amount = parseFloat($('.total_amount').val());
            var delivery_charge = parseFloat($(this).val());
            var grand_total_amount = parseFloat(total_amount + delivery_charge).toFixed(2);
            $('.total_amount').val(grand_total_amount);
});