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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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:
Find
$('#total_price' + counterr).val(total);
Add after:
recalcGrandTotal();
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:
recalcGrandTotal();
Calculating total price from input values with jquery
You can use:
$('.row').each(function(){
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;
if(inputValue){
totalSum += (parseFloat(inputValue) * quantity);
}
});
$('#total').text(totalSum.toFixed(2)).innerHTML;
});
Jquery calculate sub total from fields - qty and price by class and grand Total sum
You have your answer here: http://jsfiddle.net/kY98p/10/
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)
sum+=amount;
$(this).find('.amount').text(''+amount);
});
//just update the total to sum
$('.total').text(sum);
}
And the event that you need is:
$('.qty').change(function() {
update_amounts();
});
UPDATE: jsfiddle with total: http://jsfiddle.net/kY98p/11/
Jquery, calculate sum of fields (dynamic)
How about this: jsFiddle example.
jQuery:
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);
});
$('div.total_amount').html(total);
}
$('button').click(doCalc);
Related Topics
The Use of the Triple Exclamation Mark
Angular 2 Concatenate Variable in Interpolation
React-Native: Application Has Not Been Registered Error
Disable Chrome Strict Mime Type Checking
Require(Img Path) Not Working/ Cannot Find Module "." Reactjs
Angular2 Do Actions After Dom Has Finished Rendering
How to Extract the User Name from an Email Address Using JavaScript
How to Concatenate a Variable for a Hyperlink
Efficiently Replace All Accented Characters in a String
How to Remove Errors Warnings from Console
How to Simulate Key Press Events Programmatically
How to Close Toggle Menu When Clicking Navigation Item Anchor Link
How to Find an Exact Word in a String
Jquery: Simplest Way to Check Url for a Parameter and Pass It to Anchor Href If It Exists
How to Get Date Value from One Date Input Field and Put It to Other Date Field Using JavaScript
How to Change the Width of Angular Material Button