JQuery get value from same class
I have these text inputs dynamically generated by jquery. but basically if you see from the HTML POV it looks like this:
<div class="po-row">
<input class="po-quantity">
<input class="po-price">
</div>
<div class="po-row">
<input class="po-quantity">
<input class="po-price">
</div>
<div class="po-row">
<input class="po-quantity">
<input class="po-price">
</div>
now, i want to do this calculation:
each po-line must have subtotal
computedpo-quantity * po-price
all intermediate data from each line will be added to the total. here's what i did but only works for the first line:
$(".po-row").each(function(){
$(".po-price").blur(function(){
var quantity = $(".po-quantity").val();
var price = $(".po-price").val();
var subtotal = quantity * price;
$(".total").text(subtotal);
});
});
how to make jquery each
work in this case? thank
source to share
You need to change the logic to count all the lines in the handler blur()
and restrict the selector to the price and quantity fields on the current line of the loop. Try the following:
$(document).on('blur', '.po-price', function () {
var subtotal = 0;
$('.po-row').each(function() {
var quantity = $(this).find(".po-quantity").val();
var price = $(this).find(".po-price").val();
subtotal += quantity * price;
});
$(".total").text(subtotal);
});
Note that I have used document
as the main selector in the example. For your code to work, you must use the closest parent .po-price
that is available in the DOM on page load.
source to share
Reorder each
and blur
. This will cause the computation to run on each of the .po-price
element events blur
.
$(".po-price").blur(function() {
var total = 0;
$(".po-row").each(function() {
var quantity = $(".po-quantity").val();
var price = $(".po-price").val();
total += quantity * price;
});
$(".total").text(total); // Update the total
});
source to share
Try each statement using: first and: last to define the input:
var total = 0;
$('.po-row').each(function() {
total += $(this).find('input:first').val() * $(this).find('input:last').val();
});
alert(total);
window.calc = function() {
var total = 0;
$('.po-row').each(function() {
total += $(this).find('input:first').val() * $(this).find('input:last').val();
});
alert(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="po-row">
<input class="po-quantity">
<input class="po-price">
</div>
<div class="po-row">
<input class="po-quantity">
<input class="po-price">
</div>
<div class="po-row">
<input class="po-quantity">
<input class="po-price">
</div>
<button type="button" onclick="calc()">Calculate</button>
source to share