Auto calculation value getting change in text-box but not in dom - javascript

I struck up with a weird problem :I am done a calculation based on change in the value in the quantity cell will multiply by parent cell in a row
Here my fiddle link :https://jsfiddle.net/hahkarthick/0y0d4vge/16/
So far the calculation works perfectly the only problem is when i check the dom i didn't see any change in value that i see it remains old value
(i.e:)2 is cell and 0 in quantity cell if change quantity to 5 then 2 get multiplied with 5 and changed to 10 ,but when i check the Dom the value remains 2 .
$(document).ready(function() {
$('.quantity').on('change, keyup', function() {
var val = $(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal = $(this).data('val');
$(this).data('val', val);
//To avoid auto inc while pressing arrow keys //
if (val == '' || isNaN(val) || val < 1 || val == undefined) {
val = 1;
}
$(this).parent().siblings().each(function() {
var oldval = $(this).find('.calc').data("val") || $(this).find('.calc').val() || "0";
var arr = String(oldval).split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if (arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('.calc').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum() {
var $dataRows = $("#sum_table tr:not('.total, .title')");
var totals = [0, 0, 0];
$dataRows.each(function() {
$(this).find('input').each(function(i) {
totals[i] += parseFloat($(this).val());
});
});
$("#sum_table td.totalCol").each(function(i) {
$(this).html("total:" + totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<p>Change quantity column for calculation</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name="">
</td>
<td>
<input class="calc" data-val="[10]" type="number" data-val="" value="10" name="">
</td>
<td>
<input type="number" data-val="10" value="10" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="5" value="5" name="">
</td>
<td>
<input class="calc" type="number" data-val="6" value="6" name="">
</td>
<td>
<input type="number" data-val="" value="12" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="45" value="45" name="">
</td>
<td>
<input class="calc" type="number" data-val="23" value="23" name="">
</td>
<td>
<input type="number" data-val="" value="22" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>

Related

How can I sum elements in a html table after filtering by class?

I created the following table by defining different classes in javascript (the table is actually bigger but I reduced it to 3 lines for a better comprehension).
I type manually the inputs in the first column and it calculates A, B, C and SUM.
A = 5 * input
B = 4 * input
C = 3 * input
SUM = A + B + C
Total SUM =should be in this example 36 + 24 + 60 (actually there are more rows in my column) but I don't know exactly how to automatize the job. I am trying something in this direction but it does not do the job:
forEach ({
row.querySelector(".total").value +- = (Number(row.querySelector(".sum"))
Here is the code of the table and how I generate the values:
<table class="egt" bgcolor="Olive">
<! --SEGUNDA LINEA -->
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<! --TERCERA LINEA -->
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<! --ULTIMA LINEA -->
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" /></td>
</tr>
</table>
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
row.querySelector(".fuel").addEventListener("input", (event) => {
calculate(row)
})
})
function calculate(row) {
let fuel = row.querySelector(".fuel").value;
row.querySelector(".A").value = (5 * fuel);
row.querySelector(".B").value = (4 * fuel);
row.querySelector(".C").value = (3 * fuel);
row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
}
Thanks for your advise!

I tried to simplify your example a bit. Selected all the elements we're going to need at the start of the code and then attached the event listener to your inputs. When input value changes, we're recalculating the sum of the entire row and the total sum afterwards.
const totalSum = document.querySelector('.total');
const inputs = document.querySelectorAll('.fuel');
const sums = document.querySelectorAll('.sum');
inputs.forEach(input => {
input.addEventListener('input', event => {
recalculateRowSum(input);
recalculateTotalSum();
});
});
function recalculateRowSum(input) {
const row = input.parentNode.parentNode;
const a = input.value * 5;
const b = input.value * 4;
const c = input.value * 3;
const sum = a + b + c;
row.querySelector('.A').value = a;
row.querySelector('.B').value = b;
row.querySelector('.C').value = c;
row.querySelector('.sum').value = sum;
}
function recalculateTotalSum() {
totalSum.value = [...sums].reduce((total, current) => total += +current.value, 0);
}
<table class="egt" bgcolor="Olive">
<! --SEGUNDA LINEA -->
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<! --TERCERA LINEA -->
<tbody>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<! --ULTIMA LINEA -->
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" /></td>
</tr>
</tbody>
</table>

add new function to update total value
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
row.querySelector(".fuel").addEventListener("input", (event) => {
calculate(row)
})
})
function calculate(row) {
let fuel = row.querySelector(".fuel").value;
row.querySelector(".A").value = (5 * fuel);
row.querySelector(".B").value = (4 * fuel);
row.querySelector(".C").value = (3 * fuel);
row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
calculateSum();
}
function calculateSum() {
let elements = document.querySelectorAll("tbody .sum");
let total = 0;
[...elements].forEach(ele => {
total += parseFloat(ele.value) || 0;
})
document.querySelector("tbody .total").value = total;
}

Let's clean it up:
const setup = () => {
const rows = document.querySelectorAll('.fuel');
[...rows].forEach(row => row.addEventListener('input', onInput));
}
const calculateSum = () => {
const sums = [...document.querySelectorAll('.sum')].map(input => Number.parseInt(input.value));
const result = sums.reduce((sum, value) => sum + value);
document.querySelector('.total').value = result;
}
const onInput = event => {
const input = event.target;
const currentIndex = input.dataset.rowIndex;
const fuel = Number.parseInt(input.value, 10);
const [A, B, C] = [(5 * fuel), (4 * fuel), (3 * fuel)]
const sum = A + B + C;
document.querySelector(`[data-row-index="${currentIndex}"].A`).value = A;
document.querySelector(`[data-row-index="${currentIndex}"].B`).value = B;
document.querySelector(`[data-row-index="${currentIndex}"].C`).value = C;
document.querySelector(`[data-row-index="${currentIndex}"].sum`).value = sum;
calculateSum();
}
//load
window.addEventListener('load', setup);
tbody input[type="number"] {
text-align: center;
}
<table class="egt" bgcolor="Olive">
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="fuel" data-row-index="0" type="number">
</td>
<td>
<input class="A" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="0" type="number" disabled>
</td>
</tr>
<tr>
<td>
<input class="fuel" data-row-index="1" type="number">
</td>
<td>
<input class="A" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="1" type="number" disabled>
</td>
</tr>
<tr>
<td>
<input class="fuel" data-row-index="2" type="number">
</td>
<td>
<input class="A" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="2" type="number" disabled>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" disabled></td>
</tr>
</tfoot>
</table>

Auto calculation in jQuery error

.
Iam Try To do calculation column 1 & column 2 and and value inside[] should consider .
so far i am able to calculate particular columns while using split function iam getting error .
eg: in first cell iam having value with [] its calculating correctly if i enter without [] it dosen't doing calculation and shows error
This is my fiddle link
https://jsfiddle.net/hahkarthick/0y0d4vge/2/
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).parent().siblings().each(function(){
var oldval = $(this).find('.calc').data("val");
alert(oldval);
var arr = oldval.split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if(arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum(){
var $dataRows=$("#sum_table tr:not('.total, .title')");
var totals=[0,0,0];
$dataRows.each(function() {
$(this).find('input').each(function(i){
totals[i]+=parseFloat( $(this).val());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name=""></td>
<td><input class="calc" data-val="[10]" type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input class="calc" type="number" data-val="" value="5" name=""></td>
<td><input class="calc" type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input class="calc" type="number" data-val="" value="45" name=""></td>
<td><input class="calc" type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
Thanks in Advance

See fiddle: https://jsfiddle.net/maxbilbow/0y0d4vge/7/
If data-val == "", this can return undefined. I've altered this line:
var oldval = $(this).find('.calc').data("val") || "0";
And, to be safe, cast oldval to String so that the split function works.
var arr = String(oldval).split("[");
I've also specified a class for the siblings:
$(this).parent().siblings('.calc-cell')
$(document).ready(function() {
$('.quantity').on('change, keyup', function() {
var val = $(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal = $(this).data('val');
$(this).data('val', val);
//To avoid auto inc while pressing arrow keys //
if (val == '' || isNaN(val) || val < 1 || val == undefined) {
val = 1;
}
$(this).parent().siblings('.calc-cell').each(function() {
var $calc = $(this).find('.calc');
var oldval = $calc.data("val") || $calc.val() || "0";
var arr = String(oldval).split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if (arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum() {
var $dataRows = $("#sum_table tr:not('.total, .title')");
var totals = [0, 0, 0];
$dataRows.each(function() {
$(this).find('input').each(function(i) {
totals[i] += parseFloat($(this).val());
});
});
$("#sum_table td.totalCol").each(function(i) {
$(this).html("total:" + totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name="">
</td>
<td>
<input class="calc" data-val="[10]" type="number" data-val="" value="10" name="">
</td>
<td>
<input type="number" data-val="10" value="10" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td class="calc-cell">
<input class="calc" type="number" data-val="5" value="5" name="">
</td>
<td class="calc-cell">
<input class="calc" type="number" data-val="6" value="6" name="">
</td>
<td>
<input type="number" data-val="" value="12" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="45" value="45" name="">
</td>
<td>
<input class="calc" type="number" data-val="23" value="23" name="">
</td>
<td>
<input type="number" data-val="" value="22" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>

Checkbox JavaScript does not update values

I have a table with rows of textboxes as inputs that hold numbers/hours with css .hours. I am trying to get the table to update totals when the row is deleted checkbox is checked/clicked.
How to Update the totals in the row & col at the End? when the delete row checkbox is checked.
2 steps: I zero out the values in the deleted row, and then want to update the new totals.
JS fiddle with HTML
// Call this function, When CheckBox with css .deleteRowis clicked
$('#Maintable').on('click', '.deleteRow', function ()
{
if ($(this).is(":checked")) {
var row = $(this).closest('tr').css({ 'color': 'red' });
var hours = row.find('.hours');
$.each(hours, function (index, item) {
if ($(this).val()) { // if there is a value
$(this).val('0');
// Total the rows does not work??
HoursChangedFunction($(this));
}
});
} // :checked ends
// when the row is deleted from the checkbox, find it and call this function
// 1) First make all .hours 0, 2) and then redo the totals
var HoursChangedFunction = function () {
var columnIndex = $(this).closest('td').index();
var row = $(this).closest('tr');
var hours = row.find('.hours');
var rowTotal = 0;
$.each(hours, function (index, item) {
rowTotal += Number($(this).val());
});
row.children('td.rowtotal').text(rowTotal.toFixed(2));
var columnTotal = 0;
var grandTotal = 0;
var rows = $('#Maintable tr');
$.each(rows, function (index, item) {
columnTotal += Number($(this).children('td').eq(columnIndex).children('.hours').val());
grandTotal += Number($(this).children('.rowtotal').text());
});
footer.eq(columnIndex).text(columnTotal.toFixed(2));
total.text(grandTotal.toFixed(2));
};

Because you have a lot of IDs you may avoid HoursChangedFunction.
In order to get the corresponding cell in the current col you can use the eq method
Moreover, you can use .text( function ) to simplify the task.
You can simplify the event handler from:
$('#Maintable').on('click', '.deleteRow', function ()
to:
$('#Maintable').on('change', '.deleteRow:checked', function () {
because inside the handler you execute the logic only when the checkbox is checked.
The snippet:
$('#Maintable').on('change', '.deleteRow:checked', function () {
var row = $(this).closest('tr').css({'color': 'red'});
$('#grandtotal').text(function(idx, txt) {
return (+txt - +row.find('.rowtotal').text()).toFixed(2);
});
row.find('.rowtotal').text('0.00');
row.find('.hours').each( function (index, item) {
if (item.value != '0.00') {
$('#Maintable').closest('table').find('tfoot tr td').eq(index + 2).text(function(idx, txt) {
return (+txt - +item.value).toFixed(2);
});
item.value = '0.00';
}
});
});
.hours {
width: 50px;
box-sizing: border-box;
border: solid 1px #d9e1e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Task</th>
<th>Code</th>
<th>day1</th>
<th>day2</th>
<th>dy3</th>
<th>day4</th>
<th>day5</th>
<th>day6</th>
<th>day7</th>
<th>Total</th>
<th>Del</th>
</tr>
</thead>
<tbody id="Maintable">
<tr>
<td>
<span class="project">Project 1</span>
</td>
<td>
<span class="timecode">code 1A</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="2.50">
</td>
<td>
<input class="hours" type="text" value="4.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">6.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 2</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="timecode">code 2B</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="4.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">4.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 3</span>
</td>
<td>
<span class="timecode">code 2C</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" ype="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">0.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>0.00</td>
<td>7.50</td>
<td>4.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td id="grandtotal">11.50</td>
</tr>
</tfoot>
</table>

How to use onchange event?

This is my code where if i put quantity then it will calculate it and show it in total amount. my problem is that if i change my quantity in between process my total amount is not change.
How to do it onchange quantity total amount have to different
<script>
function valid(obj)
{
var frm=document.getElementById("frm");
var qty=parseInt(document.getElementById("quantity").value);
var price=parseInt(obj.value);
var total=parseInt(document.getElementById("total").value);
if(isNaN(total))
{
total=0;
}
if(obj.checked==true)
{
total=total+(qty*price);
document.getElementById("total").value=total;
}
else
{
total=total-(qty*price);
document.getElementById("total").value=total;
}
/*for(var i=0;i<frm.length;i++)
{
if(frm[i].type=="checkbox")
{
if(frm[i].checked==true)
{
total=total+(parseInt(frm[i].value)*qty);
}
}
}*/
document.getElementById("total").value=total
}
</script>
<form action="abc.html" method="post" id="frm" onsubmit="return valid(this);">
<table>
<tr>
<th colspan="2">Qualification</th>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>BCA</td>
<td><input type="checkbox" name="check_list[]" value="2000" onClick="valid(this);" /></td><td>MCA</td>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1200" onClick="valid(this);" /></td><td>BBA</td>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>MBA</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="quantity" id="quantity" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="total" id="total" value="" placeholder="Total"></td>
</tr>
<tr>
<td colspan="2"><input type="button" onClick="valid();" name="submit" value="Send" /></td>
</tr>
</table>
</form>

Define var isFormSubimited = false;
Set isFormSubimited = true in valid function.
Add "onchange='onQuantityChange()'" to quantity input element.
Add following function.
function onQuantityChange()
{
if(isFormSubimited && $("input[type='checkbox']:checked").length > 0)
{
//var _form = document.getElementById('frm');
//_form.submit();
valid();
}
}

jQuery abs of values of 2 sets functions when checked

Working jsfiddle
Still new to jQuery/javacript, but I have 2 functions which sum up hidden values when checked and I need to generate the absolute value of their difference :
$(document).ready(function() {
function sumRows() {
var sum = 0,
total = $('#total');
$('#myteam tr').each(function() {
var amount = $(this).find('input[name="amount"]'),
checkbox = $(this).find('input[name="include"]');
if (checkbox.is(':checked') && amount.val().length > 0) {
sum += parseInt(amount.val(), 10);
}
});
total.text(sum);
}
function sumRows2() {
var sum2 = 0,
total2 = $('#total2');
$('#otherteam tr').each(function() {
var amount2 = $(this).find('input[name="amount2"]'),
checkbox2 = $(this).find('input[name="include2"]');
if (checkbox2.is(':checked') && amount2.val().length > 0) {
sum2 += parseInt(amount2.val(), 10);
}
});
total2.text(sum2);
}
$('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);
$('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2);
});`
This is the simpler HTML to show you what I'm looking to do, I want the Difference to show up each team a box is checked :
<table>
<tr>
<td colspan="2">Difference:
<span id="diff">0</span>
</td>
</tr>
<tr>
<td>My Team:
<span id="total">0</span>
</td>
<td>Other Team:
<span id="total2">0</span>
</td>
</tr>
<tr>
<td>
<table id="myteam">
<tr>
<td>
<input type="hidden" value="100" name="amount">
</td>
<td>
<input type="checkbox" name="include">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="200" name="amount">
</td>
<td>
<input type="checkbox" name="include">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="300" name="amount">
</td>
<td>
<input type="checkbox" name="include">
</td>
</tr>
</table>
</td>
<td>
<table id="otherteam">
<tr>
<td>
<input type="hidden" value="100" name="amount2">
</td>
<td>
<input type="checkbox" name="include2">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="200" name="amount2">
</td>
<td>
<input type="checkbox" name="include2">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="300" name="amount2">
</td>
<td>
<input type="checkbox" name="include2">
</td>
</tr>
</table>
</td>
</tr>
</table>

$(document).ready(function() {
function sumRows() {
var sum = 0,
total = $('#total');
$('#myteam tr').each(function() {
var amount = $(this).find('input[name="amount"]'),
checkbox = $(this).find('input[name="include"]');
if (checkbox.is(':checked') && amount.val().length > 0) {
sum += parseInt(amount.val(), 10);
}
});
total.text(sum);
$("#diff").text(Math.abs(sum - parseInt(total2.innerText)));
}
function sumRows2() {
var sum2 = 0,
total2 = $('#total2');
$('#otherteam tr').each(function() {
var amount2 = $(this).find('input[name="amount2"]'),
checkbox2 = $(this).find('input[name="include2"]');
if (checkbox2.is(':checked') && amount2.val().length > 0) {
sum2 += parseInt(amount2.val(), 10);
}
});
total2.text(sum2);
$("#diff").text(Math.abs(parseInt(total.innerText)- sum2));
}
// calculate sum anytime checkbox is checked or amount is changed
$('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);
$('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2);
});

Categories

Resources