Javascript Quantity Validation Multiple Inputs - javascript

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>

Related

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 get reference to another object on other column on same row in a table in Javascript?

I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method

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) : '';
}

how can I get a value from the nth element of the closest 'tr'?

I have a dynamic table that contains price, quantity and subtotal on each row. I am trying to write a javascript method that automatically multiples the price and quantity values on each keyup and outputs them as the subtotal.
$('input.value').keyup( function() {
var row = $(this).closest('tr');
var val1 = row.find(':nth-child(1)').value;
var val2 = row.find(':nth-child(2)').value;
console.log(val1);
console.log(val2);
output = row.find(':nth-child(3)');
output.value = val1 * val2;
});
This is as far as I've gotten so far, the console log just shows "undefined" as the values for val1, and val2. Why is this? Am I misunderstanding how .find() works?
I have tried searching on both stack exchange and google, and I can't seem to find a good example of using nth-child based on the currently selected row.
Here is a simplified version of the table row. Each table row has an id based on it's row number.
<tr id = "row_#">
<td>
<?php echo $this->Form->text("Items.{$key}.quantity", array('value' => $item['quantity'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.price", array('value' => $item['price'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.total", array('value' => number_format( $item['price']*$item['quantity'], 2), 'class' => 'subtotal')); ?>
</td>
</tr>
I am using jquery, and cakephp 2.7
In your code, row.find(':nth-child(1)') selects a <td> element -- the first child of the <tr>. But it seems that you want to select <input> elements in each row to get their values.
In my example, below, I've given each input a class that identifies it as a "quantity", "price", or "total" field. I find the closest row to the current <input>. Then I find the value for each input within that row, calculate the total, and set the value of the "total" <input> to that number.
I'm using jQuery's selector context, which is internally equivalent to find().
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = jQuery('input.total', $row),
quantity = jQuery('input.quantity', $row).val(),
price = jQuery('input.price', $row).val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
</table>
You can use nth-child selectors rather than classes, if you prefer. But remember that "nth" children are the <td> elements, not the <input> elements. You'll need to select the <input> within each "nth" <td> child. Something like:
$row.find('td:nth-child(1) input').val()
See the example below:
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = $row.find('td:nth-child(3) input'),
quantity = $row.find('td:nth-child(1) input').val(),
price = $row.find('td:nth-child(2) input').val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
</table>
jQuery has no value property....use val() and assuming selectors are valid it should work
var val1 = row.find(':nth-child(1)').val();

Categories