Sanju Menon Sanju Menon - 7 months ago 12
Javascript Question

Calculations in a dynamically added rows using jquery

Iam trying to do a calculation in a page. It is calculating qty * price and write to amount field. And showing the totals of the amount field as GRAND TOTAL.

This is all working fine. Now in the bottom i have a link if users can dynamically add rows. After creating dynamic rows its not taking the calculations. Iam new to jquery and iam not able to find why its having problem. Can anyone pls help me with the same.

My HTML is below

<form id='cart1' name='cart' method='post' class='single' action='manual_items_poverification_save.php?tender_id=140586' ><h2 align="center">ADD PRODUCTS</h3>
<div class="clone_row">

<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr bgcolor="#E6E6FA">
<td width="5%">SlNo</td>

<td width="25%">Prod Description</td>

<td width="5%">Qty</td>

<td width="5%">Units</td>

<td width="10%">Currency</td>

<td width="4%">Price/Unit</td>
<td width="4%">Total</td>

<td width="4%">Del</td>

</tr>
</thead>
<div class="clone_row">
<tr class="product">

<td width="5%"><input size='1' type="text" name="slno[]" /></td>

<td width="25%"><textarea name="item_description[]"></textarea></td>

<td width="5%"><input size="2" class="qty" name="qty[]" type="text"></td>

<td width="15%"><input size="15" id="item_units[]" name="item_units[]" type="text"></td>

<td width="10%"><select class="currency-select" id="currency_change[]" name="currency_change[]">
<option value="">Select</option>
<option selected="selected" value="USD" data-price="1">USD</option>
<option value="INR" data-price="67.434191">INR</option>
<option value="GBP" data-price="0.704985">GBP</option>
<option value="EUR" data-price="0.91118">EUR</option>
<option value="SGD" data-price="1.386987">SGD</option>
<option value="AUD" data-price="1.347597">AUD</option>
<option value="CAD" data-price="1.342118">CAD</option>
<option value="CHF" data-price="0.997145">CHF</option>
<option value="JPY" data-price="112.6934">JPY</option>
<option value="MYR" data-price="4.129541">MYR</option>
<option value="ZAR" data-price="15.43258">ZAR</option>
</select></td>

<td width="4%"><input size="8" class="price" id='price' name="price_unit[]" type="text"></td>
<td><input type="text" class="amount" id="amount"></td>
<td class="delTD"><input class="delINP hidden" type="checkbox" /></td>
GRAND TOTAL:<input type="text" class="total" id="total">

</tr>

</div>

</table>

</div>

<br><br>
<a href="#" id="add_more">Add More Rows</a>

<table><tr><td><input value="--Update Data--" type="submit"></td><td></td></tr></table>

</form>


My jquery is below:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){

update_amounts();
$('.price').change(function() {
update_amounts();
});
$('.qty').change(function() {
update_amounts();
});
});

function update_amounts()
{
var sum = 0.0;
$('.product').each(function() {
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
var amount = (qty*price)
//alert(amount);
sum+= amount;
$(this).find('.amount').val(amount);
});
$('.total').val(sum);
//just update the total to sum

}
});

</script>
<style>
.hidden{display:none;}
.row-highlighted{background-color:red;}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$(document).on('click', '.delINP', function(){
var rr = $(this).closest('tr');
rr.addClass('row-highlighted');
if (confirm('Are you sure you want to delete this row?')){
if (rr.hasClass('newTR')) rr.remove();
}else{
rr.removeClass('row-highlighted');
rr.find('td.delTD input').prop('checked',false);
}
});

$("#add_more").on('click', function(e) {
e.preventDefault();
var clone = $("#table tbody tr:last").clone();
clone.addClass('newTR');
clone.find('td.delTD input').removeClass('hidden');
$("#table tbody").append(clone);
});
$("#submit").on('click', function(e) {
e.preventDefault();
alert($("#cart1").serialize());
});
}
</script>


FIDDLE : https://jsfiddle.net/1qbsp3b1/

Answer

You need to change jquery "change" event for added dynamic add dom in html. you need to use "on" event in jquery for that like as per below.

    $(document).ready(function () {
        update_amounts();
        $(document).on('change','.price',function(){
            update_amounts();
        });

        $(document).on('change','.qty',function(){
            update_amounts();
        }); 
    });

this will definitely help you case.

If you going to register event for dynamic dom then it must be re-register your event or call with “on”.

below link with you reference

https://api.jquery.com/on/

Comments