Total price and Quantity in Javascripts

Question

Hi guys am trying to get the Total price and quantity of each items. So, i have a fixed price of $20. the price comes out fine but its not counting the quantity of each items....

HTML code

HTML-Continous

This is the code for Total Quantity and this works fine in an input field.

function changeval() {
    $total = parseInt($("#A1").val()) + parseInt($("#B1").val()) + parseInt($("#C1").val()) + parseInt($("#D1").val()) + parseInt($("#E1").val());

    $('.A').val($("#A1").val());
    $('.B').val($("#B1").val());
    $('.C').val($("#C1").val());
    $('.D').val($("#D1").val());
    $('.E').val($("#E1").val());
    $('.total').val($total);
}

HERE IS THE PROBLEM when i add this code, the Price comes out good but the quantity no longer SHOWS.

function changeval() {
    $price = parseInt($("#A1").val() * 20) + parseInt($("#B1").val() * 20) + parseInt($("#C1").val() * 20) + parseInt($("#D1").val()* 20) + parseInt($("#E1").val()* 20);

    $('.A').val($("#A1").val());
    $('.B').val($("#B1").val());
    $('.C').val($("#C1").val());
    $('.D').val($("#D1").val());
    $('.E').val($("#E1").val());
    $('.price').val($price);
}

so i want to have something like this

PRICE = 20 QUANTITY= 1 PRICE = 40 QUANTITY= 2 '' '' since i have 20 as a fixed price. Any help will be appreciated.

Answer 1

The reason is you are using same function name for all onchange function. ie, for updating price and total you are using the same changeval1() function.

Try changing name of the function. Both function has same name. One function updates total and another updates price . So when both function has same name, both price and total gets updated.

Answer 2

If you want to get both TotalQuantity & TotalPrice, you should calculate the TotalQuantity first, then calculate TotalPrice = TotalQuantity * 20 (since you have fixed price for all items).

 $(document).ready(function() { // Handle onchange event for input number $('.qty').on('input', function() { $qty_total = 0; // Calculate total qty $(".qty").each(function() { $qty_total += parseInt($(this).val()); }); // Update to Qty input $("#qty_total").val($qty_total); // Update to Price input $("#price_total").val($qty_total * 20); }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table> <tr> <td>Item A</td> <td><input value=1 type="number" id="qty1" class="qty"></td> </tr> <tr> <td>Item B</td> <td><input value=2 type="number" id="qty2" class="qty"></td> </tr> <tr> <td>Item C</td> <td><input value=3 type="number" id="qty3" class="qty"></td> </tr> <tr> <td>Item D</td> <td><input value=4 type="number" id="qty4" class="qty"></td> </tr> <tr> <td>Item E</td> <td><input value=5 type="number" id="qty5" class="qty"></td> </tr> <tr> <td>Total Qty</td> <td><input id="qty_total"></td> </tr> <tr> <td>Total Price</td> <td><input id="price_total"></td> </tr> </table> </div>