We Keep Coding

Why aren't these HTML table's fields calculating on load?

How can I make sure that the second part of function runs, calculating the columns and showing the result at the end of each row?
function sum_row_qty(el, poOrigin) {
let rowTotal = 0
if (el) {
let parent = el.closest("tr")
parent.querySelectorAll('.size_qty').forEach(function(e) {
rowTotal += parseFloat(e.value);
})
if (rowTotal) {
parent.querySelector('.qty').value = rowTotal;
}
} else {
document.querySelectorAll("#tableRows > tr > td:first-child input").forEach(sum_row_qty);
}
}
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%; text-align: left">OS</th>
<th style="width:4%">XS</th>
<th style="width:4%">Total</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this);"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
</tbody>
</table>

Here is the answer proposed by a gentleman on another platform:
function sumInputs(row) {
const inputsArr = [...row.querySelectorAll('.size_qty')];
return inputsArr.reduce((total, {
value
}) => total += parseFloat(value), 0);
}
function sum_row_qty(el) {
if (el) {
const currentRow = el.closest("tr");
currentRow.querySelector('.qty').value = sumInputs(currentRow);
}
}
tableRows.querySelectorAll('tr').forEach(row => {
row.querySelector('.qty').value = sumInputs(row);
});
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%; text-align: left">OS</th>
<th style="width:4%">XS</th>
<th style="width:4%">Total</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this);"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
</tbody>
</table>

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 get pass the i from a for loop to the id tag in jquery?

I have a some inputs with different ids as you see down here
<tr>
<td><input type="number" id="cell1" ></td>
<td><input type="number" id="cell2" ></td>
<td><input type="number" id="cell3" ></td>
<td><input type="number" id="cell4"></td>
<td><input type="number" id="cell5"></td>
<td><input type="number" id="cell6"></td>
<td><input type="number" id="cell7" ></td>
<td><input type="number" id="cell8" ></td>
<td><input type="number" id="cell9" ></td>
</tr>
Now I want to use jquery to restrict the number the user enters in the inputs with something like this
for(var i = 0 ; i <= 81 ; i++) {
$(document).ready(function () {
$("#cell" , i).change(function () {
var n = $("#cell",i).val();
console.log($("#cell", i));
if (n < 1)
$("#cell", i).val(1);
if (n > 9)
$("#cell" , i).val(9);
});
});
}
But it doesn't get the ids. How can I pass the i variable to "#cell"?

Several things. You likely want this selector - id starts with cell
$(function() {
$("[id^=cell]").on("input",function() {
const val = this.value
if (val < 0) this.value = 1
if (val > 0) this.value = 9
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input type="number" id="cell1"></td>
<td><input type="number" id="cell2"></td>
<td><input type="number" id="cell3"></td>
<td><input type="number" id="cell4"></td>
<td><input type="number" id="cell5"></td>
<td><input type="number" id="cell6"></td>
<td><input type="number" id="cell7"></td>
<td><input type="number" id="cell8"></td>
<td><input type="number" id="cell9"></td>
</tr>
</tbody>
</table>
HTML version
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input type="number" id="cell1" min=1 max=9></td>
<td><input type="number" id="cell2" min=1 max=9></td>
<td><input type="number" id="cell3" min=1 max=9></td>
<td><input type="number" id="cell4" min=1 max=9></td>
<td><input type="number" id="cell5" min=1 max=9></td>
<td><input type="number" id="cell6" min=1 max=9></td>
<td><input type="number" id="cell7" min=1 max=9></td>
<td><input type="number" id="cell8" min=1 max=9></td>
<td><input type="number" id="cell9" min=1 max=9></td>
</tr>
</tbody>
</table>

First, move your loop inside the $document.ready
Then simply append i to the id prefix to make the correct querySelector for the cell.
Although it doesn't answer your question you could also use the min and max attributes to accomplish your task.
Here is a working example of appending the loop counter i.
// create 81 inputs for demo purposes
$(document).ready(function () {
var row= $('#myrow');
for(var i = 0 ; i <= 81 ; i++)
{
row.append($('<td/>').append('<input type="number" />').attr("id", "cell" + i));
}
});
$(document).ready(function () {
for(var i = 0 ; i <= 81 ; i++) {
$("#cell"+ i).change(function (e) {
var input= $(e.target);
var n = input.val();
if (n < 1)
input.val(1);
else if (n > 9)
input.val(9);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<tr id='myrow'>
</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>

how to in set javascript id in input value

i want to inset my javascript id in to the place of input value .
if i give Interest name input value="100"
how can i get tc named table input value="75"
my input form
<tr>
<th>Loan Amount</th>
<th>INTEREST RATE %</th>
<tr>
<tbody>
<td><input disabled type="" name="tc" id="int_amount" class="formcontrol"value=""/></td>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate();"/ class="form-control" value=""/></td>
</tr>
</tbody>
javascript
var vatti = document.pricecal.Interest.value;
var Total = vatti -25;
if(vatti = null)
{
document.getElementById("int_amount").innerHTML = "Rs:"+" "+Total;
}
[want out put like this][1]

Hope this helps you.
function calculate(interest){
var vatti = interest.value;
if (vatti != '') {
var Total = vatti - 25;
document.getElementById("int_amount").value = Total;
}else{
document.getElementById("int_amount").value = '';
}
}
<table>
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate(this)" onchange="calculate(this)" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
</table>

Set the .value of the <input> element, not the .innerHTML
document.getElementById("int_amount").value = "Rs:"+" "+Total;

HTML:
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
Javascript:
document.getElementById('input2').onkeyup = function() {
document.getElementById('int_amount').value = (this.value != '') ? 'Rs: ' + (parseInt(this.value)-25) : '';
}