How to update value based on other input box dynamically using jQuery?

Question

I'm trying to make a shopping cart.

Where I have list of products which has different price.

Now when i tried to change the quantity the price should change based on quantity as well as the total one.

But the problem i'm facing is using the below code when i tried to change the quantity, price get updated but the others also get updated as well though i didn't change the Quantity.

Then total one doesn't show the appropriate total

 $(".quantity").change(update); function update() { $(".quantity").each(function() { var qty = Number($(this).val()); var net = document.getElementById("net_price").value; var total = qty * net; $('.total').html("$" + total); $(".grandTotal").text(calculateSum()); }); function calculateSum() { var sum = 0; $(".total").each(function() { var value = $(this).val(); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> <td><input type="hidden" id="net_price" value="">45</td> <td class="grandTotal"></td> </tr> </table> 

Anyone please help me to find the soultion

Answer 1

If i understand you correctly this may help you

 $('body').on('change', ".quantity", update); function update() { var qty = parseInt($(this).val()); var net = parseFloat($(this).parents('tr').find(".net_price").val()); var total = qty * net; $(this).parents('tr').find(".total_price").text("$" + total); $(".grandTotal").text('$' + calculateSum()); function calculateSum() { var sum = 0; $(".total_price").each(function() { var value = $(this).text().replace('$', ''); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td colsapn="3" class="grandTotal"></td> </tr> </table> 

Performance Improvement A performance improvement of above code by extracting calculateSum externally to avoid recreation of same function again and again while calling update method

 $('body').on('change', ".quantity", update); function calculateSum() { var sum = 0; $(".total_price").each(function() { var value = $(this).text().replace('$', ''); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } function update() { var qty = parseInt($(this).val()); var net = parseFloat($(this).parents('tr').find(".net_price").val()); var total = qty * net; $(this).parents('tr').find(".total_price").text("$" + total); $(".grandTotal").text('$' + calculateSum()); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td colsapn="3" class="grandTotal"></td> </tr> </table> 

Answer 2

• You are setting the HTML value for element which is $ concatenated with value but while retrieving the value, you are using .val() method. To get the text from the element, use .text method instead.

• As value is prefixed with $ , we can not use it for manipulations hence .data method is used to store numerical value in data for particular element.

• jQuery.data('key') is used to retrieve the value.

 $(".quantity").change(update); function update() { $(".quantity").each(function() { var qty = Number($(this).val()); var net = 10; //Static value is considered var total = qty * net; var totalElem = $('.total'); totalElem.html("$" + total); totalElem.data("value", total); $(".grandTotal").text(calculateSum()); }); function calculateSum() { var sum = 0; $(".total").each(function() { var value = $(this).data('value'); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /> </td> <td class="total_price table-default total"></td> <td class="grandTotal"></td> </tr> </table> 

Answer 3

 $(".quantity").change(update); function update() { // Cell Variables var $qty = $(this), $row = $qty.closest('tr'), $total = $row.find('.total'); // Number Variables var qty = Number($qty.val()), price = $row.find('.price').val(), total = qty * price; // Fill Values $total.html("$" + total); $('.grandTotal').text('$' + calculateSum()); } function calculateSum() { var sum = 0; $('.total').each(function() { var strTotal = $(this).text(); var total = parseFloat(strTotal.replace(/^\\D+/g, '')); if (!isNaN(total)) sum += total; }); return sum; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Quantity</th> <th>Price</th> <th>Total</th> <th>Grand Total</th> </tr> </thead> <tbody> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /> </td> <td><input type="hidden" class="price" value="45" />$45</td> <td class="total_price table-default total"></td> <td class="grandTotal"></td> </tr> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /> </td> <td><input type="hidden" class="price" value="10" />$10</td> <td class="total_price table-default total"></td> <td class="grandTotal"></td> </tr> </tbody> </table>