Calculate sum of dynamically adding input fields with jquery - php

Question

I've a form where i am calculating sum of amounts. Rows are dynamically generated with jquery clone();
This code is calculating sum of rendered rows not the new created rows
$(document).ready(function(){
$('.datepicker').datepicker();
var $inst = $('.inst_amount');
$inst_form = $('.inst_form');
$total_amount = $('#total_amount');
$total_price = $('#total_price');
total = 0;
$.each($inst, function(index, val) {
var val = ($(this).val() == "") ? 0 : $(this).val();
total = total + parseFloat(val);
});
$total_price.html(Math.round(total));
$total_amount.val(Math.round(total));
$(document).on('blur','.inst_amount', function(){
var total = 0;
$.each($inst, function(index, val) {
var val = ($(this).val() == "") ? 0 : $(this).val();
total = total + parseFloat(val);
});
console.log(total);
$total_price.html(Math.round(total));
$total_amount.val(Math.round(total));
});
});

Answer 1

move var $inst = $('.inst_amount'); to where you use it:
var total = 0,$inst = $('.inst_amount'); - actually don't even. See my code
Use commas to separate vars
DRY - Don't Repeat Yourself
give the class correctly and add the field to a container.
function sumIt() {
var total = 0, val;
$('.inst_amount').each(function() {
val = $(this).val();
val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
total += val;
});
$('#total_price').html(Math.round(total));
$('#total_amount').val(Math.round(total));
}
$(function() {
// $('.datepicker').datepicker(); // not needed for this test
$("#add").on("click", function() {
$("#container input").last()
.before($("<input />").prop("class","inst_amount").val(0))
.before("<br/>");
sumIt();
});
$(document).on('input', '.inst_amount', sumIt);
sumIt() // run when loading
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="add" value="add" /><br/>
<form id="inst_form">
<div id="container">
<input type="text" class="inst_amount" value="4" /><br/>
<input type="text" class="inst_amount" value="" /><br/>
<input type="text" id="total_amount" value="0" />
</form>
</div>
<span id="total_price"></span>

Answer 2

This code will only calculate total of all the rows which were available when page was loaded. You need to call the same code to make the total again when you are adding a new row. Basically on click of add row you need to re-calculate.

Answer 3

Put these code outside the $(document).ready
$(document).on('blur','.inst_amount', function(){
var total = 0;
$.each($inst, function(index, val) {
var val = ($(this).val() == "") ? 0 : $(this).val();
total = total + parseFloat(val);
});
console.log(total);
$total_price.html(Math.round(total));
$total_amount.val(Math.round(total));
});
because at a time of $(document).ready , new row is not added