Automatically changes the value of total field when other field has value dynamically in javascript

Question

I try to achieve Total of two input fields and those fields got their value dynamically from database after selecting a dropdown option. The html code and the sql query looks like below:

<select name="getData" ID="getData" onchange="getData()">
    <option value="Select">Select Subscription Package</option>
    <?php
    $sql = "SELECT * FROM package WHERE status = 1";
    $result = $connect->query($sql);
    while($row = mysqli_fetch_row($result)){ 
        echo '<option data-price="'.$row[4].'" value='.$row[0].'> '.$row[1].' </option>';
        }
    ?>
</select>
<input type="text" id="price1" name="price1"/>
<input type="text" id="price2" name="price2"/>
<input type="text" id="totalAmount" name="totalAmount" onblur="totalCalc()">

Value of price1 & price2 changes when SELECT Option changed. Now I need to get total of these two fields by javascript. The js code is below:

<script>
    function totalCalc() {
        var A = document.getElementById("price1").value;
        var B = document.getElementById("price2").value;
        var C = A + B;
        document.getElementById("totalAmount").value = C;
    }
</script>

I got the total but it needs to click the total amount field. I want the calculation should be done automatically right after the first two fields got their values dynamically.

Any help is appreciated.

Answer 1

You should just set up change event handlers on both inputs that point to your totalCalc function and then, at the end of your getData() function, manually trigger the change event of one of the inputs.

If the code in getData is asynchronous, then the code that manually triggers the change event should be included in the success handler of the operation.

A note about the UI. If the two price fields are being auto-populated and users won't be inputting anything into them manually, disabling the fields is probably appropriate. With regards to the final total, an input there may not make sense at all - you just need to show the result, so a span element would work.

Also, inline HTML event attributes (onclick, onchange, etc.) should not be used. There are many reasons why this 20+ year old technique needs to die the death it deserves, but because so many people don't take the time to really learn JavaScript and modern best-practices, they just copy someone else's code that uses them and go on their merry way.

So, in the code below, I'm showing how to solve this problem using modern, standards-based code that follows best-practices.

// Get references to the DOM elements you'll need to work with
let a = document.getElementById("price1");
let b = document.getElementById("price2");
let total = document.getElementById("totalAmount");
let select = document.getElementById("getData");
let price1 = document.getElementById("price1");
let price2 = document.getElementById("price2");

// Set up event handlers in JavaScript, not HTML
select.addEventListener("change", getData);
price1.addEventListener("change", totalCalc);
price2.addEventListener("change", totalCalc);

function totalCalc() {
  total.textContent = +a.value + +b.value;
}

function getData(){
  // This is just mean to replicate what SQL does
  price1.value = 15;
  price2.value = 27;

  // Manually trigger the change event for either one of the inputs
  // If the existing code in getData is asynchronous, then this code
  // should be added to the "success" callback. If not, it can just be
  // placed at the end of the function as I'm showing it here.
  var event = new Event('change');
  price1.dispatchEvent(event);
}

<select name="getData" id="getData">
    <option value="Select">Select Subscription Package</option>
    <option>Data 1 from SQL</option>
    <option>Data 2 from SQL</option>
    <option>Data 3 from SQL</option>        
</select>
<input type="text" id="price1" name="price1" disabled>
<input type="text" id="price2" name="price2" disabled>

<!-- No need to place the result in an <input> since users won't
     be inputted data here. You just need to show it.  -->
<span id="totalAmount"></span>