Dynamically add and/or subtract value from SELECT OPTION to an existing INPUT value

Question

I have an <input readonly> field that contains a <?php echo $row['val'];?> value which is the total_price of a shopping cart. Also I have a <select> with options of transport type and its value can add or subtract more money to the total_price

Choose transport type:

<select id="transport">
    <option value="0">Pick Up (costs 0$)</option>
    <option value="5">UPS (costs 5$)</option>
</select>

<h3> Total: </h3>
<input id="totalprice" type="text" value="<?php echo $row['total_sum'];?>" readonly> $

What I would like to do is when I select "UPS (costs 5$)" and the total price input value is 50, it shows 55 $, and then if I select "Pick Up (costs 0$)" it shows 50 again.

Is there some way to achieve this with javascript? I've searched for an answer here in StackOverflow but the similar questions aren´t what I need, I would like to interact with the input value, not just showing the option.value in a <input> . Thank you!

Answer 1

Not tested but should work. Try this:

var totalPrice = parseInt($('#totalprice').val());
$('#transport').change(function(){
    var dynamicPrice = totalPrice;
    if(parseInt($(this).val()) != 0){
       var newValue = dynamicPrice + parseInt($(this).val());
       $('#totalprice').val(newValue);
    }else{
       $('#totalprice').val(totalPrice);
    }
});