I have a few fields, when the quantity is changed, the total is calculated but there is a problem, if I load the page prepopulated from mysql and change the price value without touching the quantity, the total do not change.

Please see the attached picture to understand the problem better.

Imagine that I load this form with pre populated data(update page), if I change dropdownlist 1 and 2, without physically changing the quantity, then the input field 3(total) will not change.

Any idea why please?

Thank you so much!

2. <script> 
4. <div class="form-inline well">
5. <label for="<?php echo "label".++$label_id; ?>">Choose Product*</label>
6. <div class="form-group" id="totals">
7. 
   
8. <!--Product name Select-->
9. <select name="product" class="form-control products" required>
10. <option><?php echo $product; ?></option>
11. <?php 
12. $query_field3 = "SELECT * FROM products ORDER BY name desc";
13.                         $result_field3 = mysqli_query($connection, $query_field3) or die (mysqli_error());
14.                         while($row_field3 = mysqli_fetch_array($result_field3)){
15. $product_name = $row_field3['name'];
16. $product_price1 =  $row_field3['price1'];
17. $product_price2 =  $row_field3['price2'];
18.                         $product_price3 = $row_field3['price3'];
19. ?>
20. <option value="<?php echo $product_name; ?>" data-product_price1="<?php echo $product_price1; ?>" data-product_price2="<?php echo $product_price2; ?>" data-product_price3="<?php echo $product_price3; ?>"><?php echo $product_name; ?></option>
21.                         <?php } ?>
22.    </select>
23. 
    
24. <!--Price Select-->
25.                         <select name="price" class="form-control prices" required>
26. 
    
27. <option value="<?php echo $price; ?>"><?php echo $price; ?></option>
28. 
    
29. </select>
30. 
    
31. <label for="product1_id">Qty</label>
32. <input name="quantity" value="<?php echo $quantity; ?>" type="text" class="form-control quantity" maxlength="4" size="4">
34. <label for="total_id">Total Cost(&euro;)</label>
35. <input name="total" value="<?php echo $cust_order_total; ?>" type="text" class="form-control total" maxlength="4" size="4">
36.  </div>
37.  </div>
   
38. $(function() {
39.       $('.form-control.products').change(function() {
40.             var selected = $('option:selected', this);
41.             var options = '';
42.             for (var i = 1; i <= 3; i++) {
43.                   options += '<option>' + selected.data('product_price' + i) + '</option>';
44.             }
45.             $('.form-control.prices').html(options);
46.       });
47. });
48. </script>