Develop Reference

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

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>

How to make limit(error alert) for checked numbers or units sum(JavaScript)?

hi.this is my code.
How can I make limit for checked numbers or units sum?
for ex:if sum is ≤12 and ≥20 show error log(result) when press submit button.
<script type="text/javascript">
function chkcontrol(j)
{
var sum=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
sum = sum + parseInt(document.form1.ckb[i].value);
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
if(sum >20){
sum = sum - parseInt(document.form1.ckb[j].value);
document.form1.ckb[j].checked = false ;
alert("error:Total of yore choose is more than 20 units")
//return false;
}
document.getElementById("msg").innerHTML="total units :"+ sum;
}
}
</script>

This should solve your problem.
var form = document.forms.myform,
elem = form.elements,
inputVals = document.getElementsByClassName("inputVals");
form.onsubmit = function(event){
event.preventDefault();
var totalSum = 0;
for(var i = 1; i <= inputVals.length; i++) {
var input = document.getElementById("value" + i)
if (input.checked) {
totalSum += parseInt(input.value);
}
}
if (totalSum < 12 || totalSum > 20) {
alert("error:Total of your choise is more than 20 or less 12 units")
}
else {
document.getElementById("msg").innerHTML="total units :" + totalSum;
}
}
.center{text-align:center;margin-top:1em;}
<form name="myform" actopm="/echo/html/" method="post">
<table>
<tr>
<th>1</th>
<td><input class="inputVals" value=1 type="checkbox" id="value1" placeholder="input value"/></td>
</tr>
<tr>
<th>2</th>
<td><input class="inputVals" value=2 type="checkbox" id="value2" placeholder="input value"/></td>
</tr>
<tr>
<th>3</th>
<td><input class="inputVals" value=3 type="checkbox" id="value3" placeholder="input value"/></td>
</tr>
<tr>
<th>4</th>
<td><input class="inputVals" value=4 type="checkbox" id="value4" placeholder="input value"/></td>
</tr>
<tr>
<th>5</th>
<td><input class="inputVals" value=5 type="checkbox" id="value5" placeholder="input value"/></td>
</tr>
<tr>
<th>6</th>
<td><input class="inputVals" value=6 type="checkbox" id="value6" placeholder="input value"/></td>
</tr>
<tr>
<th>7</th>
<td><input class="inputVals" value=7 type="checkbox" id="value7" placeholder="input value"/></td>
</tr>
<tr>
<th>8</th>
<td><input class="inputVals" value=8 type="checkbox" id="value8" placeholder="input value"/></td>
</tr>
</table>
<div class="center">
<input type="submit" value="submit"/>
</div>
</form>
<div id="msg">
</div>

How to update value based on other input box dynamically using jQuery?

I'm trying to make a shopping cart.
Where I have list of products which has different price.
Now when i tried to change the quantity the price should change based on quantity as well as the total one.
But the problem i'm facing is using the below code when i tried to change the quantity, price get updated but the others also get updated as well though i didn't change the Quantity.
Then total one doesn't show the appropriate total
$(".quantity").change(update);
function update() {
$(".quantity").each(function() {
var qty = Number($(this).val());
var net = document.getElementById("net_price").value;
var total = qty * net;
$('.total').html("$" + total);
$(".grandTotal").text(calculateSum());
});
function calculateSum() {
var sum = 0;
$(".total").each(function() {
var value = $(this).val();
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
<td><input type="hidden" id="net_price" value="">45</td>
<td class="grandTotal"></td>
</tr>
</table>
Anyone please help me to find the soultion

If i understand you correctly this may help you
$('body').on('change', ".quantity", update);
function update() {
var qty = parseInt($(this).val());
var net = parseFloat($(this).parents('tr').find(".net_price").val());
var total = qty * net;
$(this).parents('tr').find(".total_price").text("$" + total);
$(".grandTotal").text('$' + calculateSum());
function calculateSum() {
var sum = 0;
$(".total_price").each(function() {
var value = $(this).text().replace('$', '');
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td colsapn="3" class="grandTotal"></td>
</tr>
</table>
Performance Improvement
A performance improvement of above code by extracting calculateSum externally to avoid recreation of same function again and again while calling update method
$('body').on('change', ".quantity", update);
function calculateSum() {
var sum = 0;
$(".total_price").each(function() {
var value = $(this).text().replace('$', '');
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
function update() {
var qty = parseInt($(this).val());
var net = parseFloat($(this).parents('tr').find(".net_price").val());
var total = qty * net;
$(this).parents('tr').find(".total_price").text("$" + total);
$(".grandTotal").text('$' + calculateSum());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td class="qty table-default">
<td><input type="text" readonly class="net_price" value="25"></td>
<td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
</tr>
<tr>
<td colsapn="3" class="grandTotal"></td>
</tr>
</table>

You are setting the HTML value for element which is $ concatenated with value but while retrieving the value, you are using .val() method. To get the text from the element, use .text method instead.
As value is prefixed with $, we can not use it for manipulations hence .data method is used to store numerical value in data for particular element.
jQuery.data('key') is used to retrieve the value.
$(".quantity").change(update);
function update() {
$(".quantity").each(function() {
var qty = Number($(this).val());
var net = 10; //Static value is considered
var total = qty * net;
var totalElem = $('.total');
totalElem.html("$" + total);
totalElem.data("value", total);
$(".grandTotal").text(calculateSum());
});
function calculateSum() {
var sum = 0;
$(".total").each(function() {
var value = $(this).data('value');
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
return sum;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
</td>
<td class="total_price table-default total"></td>
<td class="grandTotal"></td>
</tr>
</table>

$(".quantity").change(update);
function update() {
// Cell Variables
var $qty = $(this),
$row = $qty.closest('tr'),
$total = $row.find('.total');
// Number Variables
var qty = Number($qty.val()),
price = $row.find('.price').val(),
total = qty * price;
// Fill Values
$total.html("$" + total);
$('.grandTotal').text('$' + calculateSum());
}
function calculateSum() {
var sum = 0;
$('.total').each(function() {
var strTotal = $(this).text();
var total = parseFloat(strTotal.replace(/^\D+/g, ''));
if (!isNaN(total))
sum += total;
});
return sum;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th>Grand Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
</td>
<td><input type="hidden" class="price" value="45" />$45</td>
<td class="total_price table-default total"></td>
<td class="grandTotal"></td>
</tr>
<tr>
<td class="qty table-default">
<input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
</td>
<td><input type="hidden" class="price" value="10" />$10</td>
<td class="total_price table-default total"></td>
<td class="grandTotal"></td>
</tr>
</tbody>
</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);
});