I am trying to calculate the sum of text fields from a row which are checked.
My code works fine, but the problem which I am facing is my only calculate the value of first row only and it to previous result every time instead of adding current text field value.
Here is working fiddle:
https://jsfiddle.net/infohassan/27L6wvgw/
Here is my JS code:
$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
$('input[name^="txtChecked"]').each(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
calculateTotal();
});
});
});
function calculateTotal() {
var total = 0;
$('input[name^="txtChecked"]:checked').each(function(){
var val = parseFloat($('input[name^="txtCostAmount"]').val());
total += val;
});
$('input[name="txtNetAmount"]').val(total);
}
I cleaned your event handler...
And I made the .each() loop look for the text input which is on the same tr as the checkbox...
UpdatedFiddle
$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
//$('input[name^="txtChecked"]').each(function() {
//var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
calculateTotal();
//});
});
});
function calculateTotal() {
var total = 0;
$('input[name^="txtChecked"]:checked').each(function(){
var val = parseFloat($(this).parents("tr").find('input[name^="txtCostAmount"]').val());
total += val;
});
$('input[name="txtNetAmount"]').val(total);
}
$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
// var countCheckedCheckboxes = $checkboxes.find(':checked').length;
calculateTotal();
});
});
function calculateTotal() {
var total = 0;
$('input[name^="txtChecked"]:checked').each(function(index, item){
var parent = $(item).closest('tr');
var val = parseFloat(parent.find('input[name^="txtCostAmount"]').val());
total += val;
});
$('input[name="txtNetAmount"]').val(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th>Items</th>
<th>Cost</th>
</thead>
<tbody>
</tbody>
<tr>
<td><input name="txtChecked0" type="checkbox"></td>
<td>Item Name 1</td>
<td><input class="form-control input-sm" name="txtCostAmount0" value="3500" type="text"></td>
</tr>
<tr>
<td><input name="txtChecked1" type="checkbox"></td>
<td>Item Name 2</td>
<td><input class="form-control input-sm" name="txtCostAmount1" value="4500" type="text"></td>
</tr>
<tr>
<td><input name="txtChecked2" type="checkbox"></td>
<td>Item Name 3</td>
<td><input class="form-control input-sm" name="txtCostAmount2" value="4500" type="text"></td>
</tr>
</table>
<p>NetAmount <input class="form-control" name="txtNetAmount" value="0.00" readonly="" type="text"></p>
Related
HTML:
<table id="tbl" border="1">
<tr>
<th>Name</th>
<th>Mark1</th>
<th>Mark2</th>
<th>Total</th>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="cell"></td>
<td><input type="text" class="cell"></td>
<td><b><span id="total_sum_value"></span></b></td>
<td><b><span id="total_sum_value1"></span></b></td>
<th><input class="add-row" data-id="1" type="button" value="+"></th>
</tr>
</table>
JavaScript:
$(document).ready(function(){
var i = $(".add-row").data("id");
$(".add-row").click(function(){
$('#tbl').append('<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>');
var two = $("input").addClass("cell"+i);
$("#tbl").on('input','.cell'+i,function(){
var sum1 = 0;
$(".cell"+i).each(function() {
var get_val = $(this).val();
sum1 += parseFloat(get_val);
});
$("#total_sum_value1").html(sum1);
});
i++;
});
$("#tbl").on('input','.cell',function(){
var sum = 0;
$('.cell').each(function(){
var get_val = $(this).val();
sum += parseFloat(get_val);
});
$("#total_sum_value").html(sum);
});
});
When you click on the plus sign button, it generates three textboxes. I want to calculate the sum of those textboxes and print it in a span.
Here is a CodePen of my code: https://codepen.io/anon/pen/XBqKVZ?editors=1010
can you try like this:
$('.cell').on('change', function(){
var sum = 0;
var data ={
}
$('.cell').each(function(index, item){
var val = $(item).val();
var get_val = $(this).val();
sum += Number(get_val);
console.log(sum);
});
$("#total_sum_value").html(sum);
});
URL: Jsfiddle
I want to copy and paste excel columns or any similar lists into HTML table. I have found this code, but there is an issue. It pastes data like a row. So how can I change It to paste like a column? Thanks in advance.
$(document).ready(function() {
$('td input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().next().find('input');
} else{
input = input.parent().parent().next().find('input');
}
}
}, 0);
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
Here is solution for you:
$(document).ready(function() {
$('td input').bind('paste', null, function(e) {
$input = $(this);
setTimeout(function() {
var values = $input.val().split(/\s+/),
row = $input.closest('tr'),
col = $input.closest('td').index();
console.log(col);
for (var i = 0; i < values.length; i++) {
row.find('input').eq(col).val(values[i]);
row = row.next();
}
}, 0);
});
});
I want to calculate the sum of a column consisting multiple row
the values are retrieved from the database and can also be manually alter/
The issue is without the input event, the function are not triggered.
So when the column display multiple rows value, the total amount wont show.
Any idea.Thanks in advance
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>A :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10"/></td>
</tr>
<tr>
<td><span>C :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
}
calculate();
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>A :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10"/></td>
</tr>
<tr>
<td><span>C :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
You should move code that calculates price to separate function and call it on 'domready' and 'input' events.
This may helpful
$(document).ready(function(){
var calculated_total_sum;
calSum();
$("#myTable").on('input', '.txtCal', function () {
calSum();
});
function calSum()
{
calculated_total_sum=0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
}
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>A :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10"/></td>
</tr>
<tr>
<td><span>C :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
Just change when the event calculate the value. In your code, you triggered the calculation when the txtCal class are input. You have to create a separate function like this:
function calculate() {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
}
$(document).ready(function(){
calculate();
$("#myTable").on('input', '.txtCal', function () {
calculate();
}
});
Hope it helps you
Make a separate function and call it on input and to get the sum when page gets ready with values from database, call it inside document.ready like given below:
function getSum()
{
$("#myTable .txtCal").each(function () {
var calculated_total_sum = 0;
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
}
$(document).ready(function(){
getSum();
$("#myTable").on('input', '.txtCal', function () {
getSum();
});
});
I have this html table:
<table id='table1'>
<tr>
<td>String</td>
<td><input type='text' id='first-input-01'></input></td>
<td><input type='text' id='second-input-01'></input></td>
</tr>
<tr>
<td>String</td>
<td><input type='text' id='first-input-02'></input></td>
<td><input type='text' id='second-input-02'></input></td>
</tr>
<tr>
<td>Total:</td>
<td> </td>
<td>(total goes here)</td>
</tr>
</table>
and using jQuery, I want to find the value of #first-input-xx and multiply it by #second-input-xx for each table row, adding up each row to an overall total. However, I'm finding it difficult to select each input for each table row. I'm trying:
var total = 0;
$("#table1 tr").each(function() {
var amount1 = $(this).children("td:nth-last-child(2) input").val();
var amount2 = $(this).children("td:last input").val();
total = total + (parseFloat(amount1) * parseFloat(amount2));
});
Appreciative of any help.
You cannot use .children() as you are trying to find the input element, instead use .find()
var total = 0;
$("#table1 tr").each(function () {
var amount1 = $(this).find("td:eq(-2) input").val();
var amount2 = $(this).find("td:last input").val();
total += (parseFloat(amount1) * parseFloat(amount2)) || 0;
});
alert(total)
$('button').click(function() {
var total = 0;
$("#table1 tr").each(function() {
var amount1 = $(this).find("td:eq(-2) input").val();
var amount2 = $(this).find("td:last input").val();
total += (parseFloat(amount1) * parseFloat(amount2)) || 0;
});
alert(total)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='table1'>
<tr>
<td>String</td>
<td>
<input type='text' id='first-input-01'></input>
</td>
<td>
<input type='text' id='second-input-01'></input>
</td>
</tr>
<tr>
<td>String</td>
<td>
<input type='text' id='first-input-02'></input>
</td>
<td>
<input type='text' id='second-input-02'></input>
</td>
</tr>
</table>
<button>Test</button>
Try this: use eq()
var total = 0;
$("#table1 tr").each(function () {
var input = $(this).find('input');
if (input.length == 2) {
total += input.eq(0).val() * input.eq(1).val();
}
console.log(total)
});
DEMO
$("#table1 tr").each(function() {
var amount1 = $(this).find("td:nth-child(2)").val();
var amount2 = $(this).find("td:nth-child(3)").val();
total = total + (parseFloat(amount1) * parseFloat(amount2));
});
Here i have added few codes. please check it out.
$("#calculate_btn").click(function(){
var total=0;
var row_mux=1;
$("#table1 tr").each(function(key,val){
$(val).find("input").each(function(k,v){
row_mux*=parseFloat($(v).val());
});
total=row_mux++;
});
alert(total);
$("#table1 tr:last").find("td:last").html(total);
});
demo
here is my js:
function sumAllFields() {
var priceSum = 0;
$(".price").each(function () {
var o = $(this).parent().parent().index();
priceSum += Number($("#area" + o).text()) * $("#price" + o).val();
})
$("#sumPrice, #printSumPrice").html(priceSum.toFixed(2));
}
And here is relevant html:
<tbody id="tableBody">
<tr class="tableRow" id="tableRow0">
<td><input class="idNumber" id="idNumber0" type="number"></td>
<td><input class="description" id="description0" type="text"></td>
<td class="dimA" id="dimA0">520</td>
<td class="dimB" id="dimB0">785</td>
<td><input class="pcs" id="pcs0" type="number"></td>
<td class="area" id="area0">2.46</td>
<td><input class="price" id="price0" type="number"></td>
<td class="noprint"><span class="closed">×</span></td>
</tr>
<!-- and a few more in between... -->
<tr class="tableRow" id="tableRow8">
<td><input class="idNumber" id="idNumber8" type="number"></td>
<td><input class="description" id="description8" type="text"></td>
<td class="dimA" id="dimA8">510</td>
<td class="dimB" id="dimB8">785</td>
<td><input class="pcs" id="pcs8" type="number"></td>
<td class="area" id="area8">0.80</td>
<td><input class="price" id="price8" type="number"></td>
<td class="noprint"><span class="closed">×</span></td>
</tr>
</tbody>
What I am trying to do is to automatically sum all .price fields after one <tr> is dynamically deleted, and all I get is NaN. Before I delete any row, I get a nice number, but after I delete any rows, I get NaN.
It is because of the logic you have used to find the sibling price/area element. Assume you have added 4 items, so you have elements like area0/area1/area2/area3. Now you are deleting row 2 so the element area1 is no longer present then in your each loop in the second iteration o becomes 1 then it tries to find element #area1 but there is no such element which results in Number($("#area" + o).text()) returning NaN.
Try
function sumAllFields() {
var priceSum = 0;
$(".price").each(function () {
var $tr = $(this).closest('tr');
priceSum += (+$tr.find(".area").text() * +this.value) || 0;
})
$("#sumPrice, #printSumPrice").html(priceSum.toFixed(2));
}
Demo: Fiddle
Lets iterate table rows directly:
function sumAllFields() {
var priceSum = 0;
$('.tableRow').each(function () {
var row = $(this);
priceSum += (parseFloat(row.find('.area').text())
* parseFloat(row.find('.price').val())) || 0;
})
$('#sumPrice, #printSumPrice').html(priceSum.toFixed(2));
}