We Keep Coding

Javascript Quantity Validation Multiple Inputs

I'm new to programming and still learn. I just want to ask how to make code validation for more than one input? I have data table item. I want to run validation input for each row.
My Code below is only run for the first row, and cannot running in the second row.
<tr>
<td><input id="stock" type="number" name="stock" value="<?php echo $row->stock; ?>" readonly></td>
<td><input id="qty" onInput="calc();" type="number" name="qty"></td>
</tr>
<script type="text/javascript">
function calc(){
var stock = document.getElementById("stock").value;
var qty = document.getElementById("qty").value;
if(qty > stock){
alert("Qty More Than Stock!");
document.getElementById("qty").value = 1;
}
}
</script>

You can use querySelectorAll with an data-attribute for select all inputs then forEach it and check the value like:
document.querySelectorAll('input[data-check]').forEach(el => {
el.addEventListener('change', () => {
if (parseInt(el.value) > parseInt(el.parentElement.previousElementSibling.children[0].value)) {
alert("Qty More Than Stock!");
el.value = 0;
}
});
});
<table>
<tr>
<td>Stock</td>
<td>Qty</td>
</tr>
<tr>
<td><input id="stock" type="number" name="stock" value="2" readonly></td>
<td><input data-check type="number" name="qty"></td>
</tr>
<tr>
<td><input id="stock" type="number" name="stock" value="3" readonly></td>
<td><input data-check type="number" name="qty"></td>
</tr>
</table>
PS. Remember to use always a structure like my example else my code probably doesn't work.in fact el.parentElement.previousElementSibling.children[0].value it's like say: element - parent of element (td) - previous element (other td) - the first children of the previus element (input).
Another option is use another data-attribute for select the stock value like:
document.querySelectorAll('input[data-check]').forEach(el => {
el.addEventListener('change', () => {
let stock = document.querySelector('input[data-index="'+el.dataset.stock+'"]');
if (parseInt(el.value) > parseInt(stock.value)) {
alert("Qty More Than Stock!");
el.value = 0;
}
});
});
<table>
<tr>
<td>Stock</td>
<td>Qty</td>
</tr>
<tr>
<td><input data-index='0' type="number" name="stock" value="2" readonly></td>
<td><input data-check data-stock='0' type="number" name="qty"></td>
</tr>
<tr>
<td><input data-index='1' type="number" name="stock" value="25" readonly></td>
<td><input data-check data-stock='1' type="number" name="qty"></td>
</tr>
</table>

How to calculate sum of one field in table and put it in an input

I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.

If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />

var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />

I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>

Javascript, get input value in prev td

I have a table with two inputs per row and I am trying to calculate the difference between each input for that row and display it in the 3rd column.
I have looked around and tried answers from
Here, here, here and here as well as others and none seem to work for me.
$(".calibration_input_lin").blur(function(){
var input = $(this)
var val = input.val()
var row = input.parents('tr').eq(0)
var req = input.closest('td').prev().val()
var res = $(".resolution").data("resolution")
var diff = difference = val - req
var diff = diff.toFixed(res)
$.ajax({
url: "<%= customer_asset_calibration_header_path(#customer,#asset,#calibration_header) %>",
data: { value: val }
}).done(function( response ) {
row.find(".calibration_lin_input_diff").text(diff)
window.alert(req);
});
// or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
<thead>
<tr>
<th>Weights</th>
<th>Required</th>
<th>Actual</th>
<th>Difference</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
</tbody>
<table>
I use the same script elsewhere and it works fine when the req variable is static accross all table rows. I just can't seem to get it to pick up the input in td 2.
Any help would be appreciated.

Instead of using blur you can use input. You can target the parent to get the prev() td's input value on each input change.
You have to set initial value as 0 when there is no value exist in the input. You can do so by using ternary operator.
There is no element with .resolution in the HTML whose data is used in toFixed().
You can try the following way:
$(".calibration_input_lin").on('input', function(){
var input = $(this)
var val = input.val()? input.val() : 0;
var row = input.parents('tr').eq(0)
var req = input.parents('td').prev('td').find('input').val();
req = req ? req : 0;
//var res = $(".resolution").data("resolution")
var diff = val - req;
var diff = diff.toFixed(2);
$(this).parents('tr').find('.calibration_lin_input_diff').text(diff);
// or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
<thead>
<tr>
<th>Weights</th>
<th>Required</th>
<th>Actual</th>
<th>Difference</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
</tbody>
<table>

Get total from multiple class onchange

Goodday, i'm trying to get total and grandtotal from textinput . First please check my script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>No</td>
<td>Item</td>
<td>Qty</td>
<td>est</td>
<td>tax</td>
<td>Total</td>
<td>GrandTotal</td>
</tr>
<tr>
<td>No</td>
<td>ITEM 1</td>
<td>2</td>
<td><input type="text" class="est"></td>
<td><input type="text" class="tax"></td>
<td><input type="text" readonly class="total"></td>
<td><input type="text" readonly class="grandtotal"></td>
</tr>
<tr>
<td>No</td>
<td>ITEM 1</td>
<td>2</td>
<td><input type="text" class="est"></td>
<td><input type="text" class="tax"></td>
<td><input type="text" readonly class="total"></td>
<td><input type="text" readonly class="grandtotal"></td>
</tr>
</table>
As you can i see, there is .total and .grandtotal. I want to get it with this
total = .est * .qty
grandtotal = .total * .tax
So, i want to onchange in two fields .est & .tax .
Maybe i can do this
$(document).on("change",".tax",function(){
//Code
});
and
$(document).on("change",".tax",function(){
//Code
});
But it will take time, so i'm trying to approach this way
$(document).on("change",".tax, .est",function(){
//I don't know to get value of .tax or .est only
});
How can i get the total and grandtotal ?

run and see result
$('tr').each(function() {
var qty = $($(this).children()[2]).text(),
$tax = $(this).find(".tax"),
$est = $(this).find(".est"),
$total = $(this).find(".total"),
$grandtotal = $(this).find(".grandtotal")
function onChange() {
var t = $est.val() * qty
var gt = $tax.val() * t
$total.val(t)
$grandtotal.val(gt)
}
$tax.change(onChange)
$est.change(onChange)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>No</td>
<td>Item</td>
<td>Qty</td>
<td>est</td>
<td>tax</td>
<td>Total</td>
<td>GrandTotal</td>
</tr>
<tr>
<td>No</td>
<td>ITEM 1</td>
<td>2</td>
<td><input type="text" class="est"></td>
<td><input type="text" class="tax"></td>
<td><input type="text" readonly class="total"></td>
<td><input type="text" readonly class="grandtotal"></td>
</tr>
<tr>
<td>No</td>
<td>ITEM 1</td>
<td>2</td>
<td><input type="text" class="est"></td>
<td><input type="text" class="tax"></td>
<td><input type="text" readonly class="total"></td>
<td><input type="text" readonly class="grandtotal"></td>
</tr>
</table>

I hope this help
$(function() {
var resultTax = 0, resultEst = 0, total = 0;
$(".tax").change( function() {
$(".tax").each(function() {
resultTax += parseFloat($(this).val())
});
$('.resultTax').text(resultTax);
$('.total').text($('.resultEst').text() + $('.resultTax').text());
});
$(".est").change( function() {
$(".est").each(function() {
resultEst += parseFloat($(this).val())
});
$('.resultEst').text(resultEst);
$('.total').text(parseFloat($('.resultEst').text()) + parseFloat($('.resultTax').text()));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Tax <input type="text" class="tax" value="1">
Tax <input type="text" class="tax" value="2"><br>
Est <input type="text" class="est" value="3">
Est <input type="text" class="est" value="4"><br><br>
resultTax : <span class="resultTax"></span><br>
resultEst : <span class="resultEst"></span><br>
Total Tax + Est : <span class="total"></span>

Auto Table Calculation

I have table with quantity cell when change quantity it need to multiply with other parent td value.and sum the column values .
(i.e) if i change quantity to 2 then the parent rows need multiply by 2 & columns get value get added
I done all the calculation part without input in td now i added input and the calculation got affected i debug and checked it i don't know what would be the problem
Here my fiddle:
https://jsfiddle.net/hahkarthick/57zpk59k/3/
$(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).siblings().each(function(){
var tbvalue=$(this).data("val");
var result= parseInt(tbvalue)*parseInt(val);
$(this).text(result);
});
autoSum();
});
autoSum();
});
function autoSum(){
for (var i = 1; i <= 4; i++) {
var sum = 0;
var tdBoxes = $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')');
for(var j=0; j<tdBoxes.length-1;j++)
{
var value = $(tdBoxes[j]).val();
sum += (value == undefined || value == "")? 0 : parseInt(value);
}
// set total in last cell of the column
$('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')').last().html(sum);
// $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total');
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover">
<thead>
<tr>
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" data-val="" value="20" name=""></td>
<td><input 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 type="number" data-val="" value="5" name=""></td>
<td><input 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 type="number" data-val="" value="45" name=""></td>
<td><input 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="total">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>

Hope this helps...
<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 type="text" data-val="" value="20[2]" name=""></td>
<td><input 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 type="number" data-val="" value="5" name=""></td>
<td><input 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 type="number" data-val="" value="45" name=""></td>
<td><input 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>
<script>
$(document).ready(function(){
$('.quantity').on('change',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('input').val();
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>

I have updated the fiddle.
I have made following changes :-
$('.quantity').on('change, keyup',function(){ changed to $('.quantity').on('keyup',function(){
$(this).siblings().each(function(){ changed to $(this).parent().siblings().each(function(){
var tbvalue=$(this).data("val"); changed to var tbvalue=$(this).find("input[type=number]").val();
Hope it helps.