Calculate the Total of Item Quantity into Item Price With Dynamic HTML Input Fields Using Jquery

Calculate the total of item quantity into item price with dynamic HTML input fields using jQuery

Do not use same id for multiple elements, user class instead of id. See below code to get amount

$(function(){   $(document).on("blur", "div.row .col-md-3 input[name='estamount[]']", function(){      var $row = $(this).closest('.row'); // get parent row      var est = $(this).val(); // read estimante      var count = $row.find('input[name="pcount[]"]').val(); // read count      $row.find('span.Amount').html(est*count); // put product   });});
<script src=""></script><div class="add_new_field">             <div class="row">                 <div class="col-md-4">                    <div class="form-group">                            <label class="col-form-label"> Enter Product Name</label>                        <input type="text" class="form-control" name="pname[]" placeholder="Product Name"/>                    </div>                </div> 
<div class="col-md-4"> <div class="form-group"> <label class="col-form-label"> No. of Pieces</label> <input type="text" class="form-control" name="pcount[]" placeholder="No.Of Items"/> </div> </div>
<div class="col-md-3"> <div class="form-group"> <label class="col-form-label"> Estimated Amount</label> <input type="text" class="form-control" name="estamount[]" placeholder="Estimated Amount of Each"/> </div> <p>Amount: <span class="Amount"></span></p> </div> <!--<div class="col-md-1 removebtn"><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div>-->
</div> </div>
<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

How to get price total of dynamically created rows?

Add a function to recalculate the grand total 'recalcGrandTotal'

var recalcGrandTotal = function() {
var grandTotal = 0; // Declare a var to hold the grand total
$("[id^=total_price]").each(function() { // Find all elements with an id that starts with 'total_price'
grandTotal += parseInt($(this).val()); // Add the value of the 'total_price*' field to the grand total
$('#total_amount').val(grandTotal); // append grand total amount to the total field

Then, hook this function up to the 'total price' recalculation function:

$('#total_price' + counterr).val(total);

Add after:


To substract from grand total upon removal of an item, hook this function up to the item removal function. Find:

counterr = counterr--; //Decrement field counter

Add after:


Calculating total price from input values with jquery

You can use:

var quantity = parseInt( $(this).find('[name="units[]"]').val(),10)
var price = parseInt( $(this).find('[name="unit_price[]"]').val(),10)
total += quantity * price;

Working Demo

Dynamic Add Input - Total Price after Update Item Quantity

Update the code that sums the amount to multiply the Quantity field.

$('.table-primary').on('keyup', '.value', function(){
var totalSum = 0;

$('.table-primary .value').each(function(){
var inputValue = $(this).maskMoney('unmasked')[0];
// Get quantity from same row (tr)
var quantity = $(this).closest('tr').find('.qtd').val() || 0;

totalSum += (parseFloat(inputValue) * quantity);



Jquery calculate sub total from fields - qty and price by class and grand Total sum

You have your answer here:

I changed the html to use the tags thead and tfoot for header and footer

Its just a cycle over the lines where you get the quantity and price and update the amount...

Here is the function that you should call:

function update_amounts()
var sum = 0.0;
$('#myTable > tbody > tr').each(function() {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price)
//just update the total to sum

And the event that you need is:

$('.qty').change(function() {

UPDATE: jsfiddle with total:

Jquery, calculate sum of fields (dynamic)

How about this: jsFiddle example.


function doCalc() {
var total = 0;
$('tr').each(function() {
$(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val());
$('.amount').each(function() {
total += parseInt($(this).text(),10);

Related Topics

Leave a reply