How to generate grand total dynamically using javascript - javascript

here i want to create dynamically grand total. i got total of price and quantity. but i cant get grand total to total, so kindly request to solve this, here i have to use php for loop for ten row
function myFunction(time,v) {
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
}
function my(time,ans) {
//alert('You have not Login !!');
var p="demo"+time;
var y = document.getElementById(p).value;
//var z=y+ans;
document.getElementById("total").innerHTML = ans;
}
<table>
<?php
$i=0;
while($i<=10)
{
?>
<tr>
<td> <input id="price<?php echo $i; ?>" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="myFunction(<?php echo $i; ?>,this.value)" ></td>
<td><input id="demo<?php echo $i; ?>" type="text" value="0" onChange="my(<?php echo $i; ?>,this.value)" >
</td>
</tr>
<?php
$i++;
}?>
<h4> Total :- <span id = "total"></span></h4>
</table>


Store your Total count globaly, and Get all elements of your "demo" by querySelector and then calculate them.
Check snippest.
var _mytotal=0;
function _Function1(time,v)
{
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
_mytotal=0;
_Function2();
}
function _Function2()
{
var demos = document.querySelectorAll('*[id^="demo"]');
demos.forEach(_FunctionTotal);
}
function _FunctionTotal(item)
{
_mytotal = +_mytotal + +document.getElementById(item.id).value;
document.getElementById("total").textContent = _mytotal;
}
<table>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td><input id="price0" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(0,this.value)" ></td>
<td><input id="demo0" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price1" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(1,this.value)" ></td>
<td><input id="demo1" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price2" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(2,this.value)" ></td>
<td><input id="demo2" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price3" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(3,this.value)" ></td>
<td><input id="demo3" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price4" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(4,this.value)" ></td>
<td><input id="demo4" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><h4>Grand Total</h4></td>
<td> </td>
<td><h4><span id = "total"></span></h4></td>
</tr>
</table>

Related

How to change grand total only for one table

i really have no idea right now on how to only calculate first table grand total using one script of jquery/javascript
based code from : https://www.dotnetcurry.com/jquery/1189/jquery-table-calculate-sum-all-rows
here the code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Performing Calculations in a Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
var $tblrows = $("#tblProducts tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find('.qty').on('change', function() {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$(".subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(2));
}
});
});
});
</script>
</head>
<body>
<table id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table><br><br>
<table id="tblProducts2">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table>
</body>
</html>
When i change the value in table tblProducts it calculate grand total of two table, how to separate the grand total for each table.
Sorry to ask, i really have no idea

You need to only select the .subtot input inside the current table you're in before updating it. Try this.
$(function () {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
$('table').each(function(){
var $tbl = $(this);
var $tblrows = $tbl.find('tbody tr');
$tblrows.each(function (index) {
var $tblrow = $(this);
$tblrow.find('.qty').on('change', function () {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$tbl.find(".subtot").each(function () {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$tbl.find('.grdtot').val(grandTotal.toFixed(2));
}
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Performing Calculations in a Table</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<table id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="220" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="18.32" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="29" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="19.99" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name=""/></td>
</tr>
</tfoot>
</table><br><br>
<table id="tblProducts2">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="220" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="18.32" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="29" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty"/></td>
<td><input type="text" class="price" value="19.99" name="price"/></td>
<td><input type="text" class="subtot" value="0" name="subtot"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name=""/></td>
</tr>
</tfoot>
</table>

In your jquery selectors just add your table id, and if you have multiple tables you can wrap the code in a function
function addTotal(tableID) {
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
var $tblrows = $(tableID + " tbody tr");
$tblrows.each(function(index) {
var $tblrow = $(this);
$tblrow.find( '.qty').on('change', function() {
var qty = $tblrow.find("[name=qty]").val();
var price = $tblrow.find("[name=price]").val();
var subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$tblrow.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
$(tableID + " .subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$(tableID + ' .grdtot').val(grandTotal.toFixed(2));
}
});
});
}
addTotal("#tblProducts");

You really don't need to loop over the rows to add the event listener.
You can use closest() within the handler function to isolate the row and table the element is in then use find()
$('.pnm, .price, .subtot, .grdtot').prop('readonly', true);
$('.qty').on('change', function() {
var $row = $(this).closest('tr'),
qty = $(this).val(),
price = $row.find(".price").val(),
subTotal = parseInt(qty, 10) * parseFloat(price);
if (!isNaN(subTotal)) {
$row.find('.subtot').val(subTotal.toFixed(2));
var grandTotal = 0;
var $table = $row.closest('table')
$table.find(".subtot").each(function() {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$table.find('.grdtot').val(grandTotal.toFixed(2));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblProducts">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table><br><br>
<table id="tblProducts2">
<thead>
<tr>
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
<td>Sub-Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="220" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Two" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="18.32" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Three" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="29" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Four" name="pnm" /></td>
<td><input type="text" class="qty" value="" name="qty" /></td>
<td><input type="text" class="price" value="19.99" name="price" /></td>
<td><input type="text" class="subtot" value="0" name="subtot" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="grdtot" value="" name="" /></td>
</tr>
</tfoot>
</table>

how to add array values in text box

I have three text box that given as an array, I want to add two text box and get a result in the third text box as shown in below.
<tbody>
<?php
$i=1;
foreach ($sub as $row)
{
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark" onclick="add_number()"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
i have used the below script and its running but getting a result in the first loop
<script type="text/javascript">
function add_number() {
var first_number = parseInt(document.getElementById("mark1").value);
var second_number = parseInt(document.getElementById("mark2").value);
var result = first_number + second_number;
document.getElementById("totmark").value = result;
}
</script>
please help us get an answer

html
<tbody>
<?php
$i=1;
$k=1;
foreach ($sub as $row)
{ $k++;
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1-<?php echo $k;?>"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2-<?php echo $k;?>"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark-<?php echo $k;?>" onclick="add_number(<?php echo $k;?>)"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
Script
<script type="text/javascript">
function add_number(k) {
var first_number = parseInt(document.getElementById("mark1-"+k).value);
var second_number = parseInt(document.getElementById("mark2-"+k).value);
var result = first_number + second_number;
document.getElementById("totmark-"+k).value = result;
}
</script>

The problem is the repeated IDs for each iteration, mark1, mar2, mark1, mark2, and so on. The function getElementById is returning the first element.
An alternative is to use the function closest('tr') and then find by name [name="mark-1[]"] and [name="mark-2[]"]. Then find the field to store the result using this .querySelector('[name="total-mark[]"]').
Finally, using the function addEventListener you can bind the event click to the whole set of elements [name="total-mark[]"].
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) {
elem.addEventListener('click', add_number);
});
function add_number() {
var tr = this.closest('tr');
var first_number = tr.querySelector('[name="mark-1[]"]').value;
var second_number = tr.querySelector('[name="mark-2[]"]').value;
var result = Number(first_number) + Number(second_number);
this.value = result;
}
<table>
<tbody>
<tr>
<td><input type="text" name="mark-1[]" value="" ></td>
<td><input type="text" name="mark-2[]" value="" ></td>
<td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
<tr>
<td><input type="text" name="mark-1[]" value="" ></td>
<td><input type="text" name="mark-2[]" value="" ></td>
<td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
</tbody>
</table>
A recommendation is using the current index from the PHP variable $i and add specific IDs to every field, that way you will be able to get the elements directly. For example, the two fields would have these IDs: mark-1-1[], mark-1-2[] and mark-2-1[], mark-2-2[], and so on.
This approach uses the attribute dataset.
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) {
elem.addEventListener('click', add_number);
});
function add_number() {
var field = this.dataset.field;
var first_number = document.getElementById('mark-1-' + field + '[]').value;
var second_number = document.getElementById('mark-2-' + field + '[]').value;
var result = Number(first_number) + Number(second_number);
this.value = result;
}
<table>
<tbody>
<tr>
<td><input type="text" id="mark-1-1[]" value="" ></td>
<td><input type="text" id="mark-2-1[]" value="" ></td>
<td><input type="text" data-field='1' name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
<tr>
<td><input type="text" id="mark-1-2[]" value="" ></td>
<td><input type="text" id="mark-2-2[]" value="" ></td>
<td><input type="text" data-field='2' name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
</tbody>
</table>

on submit compare two dynamically generated column in a table and display alert

I have a table with few column, all are disable except two fields.
Compare the value in the first Quanity column with the value in the second Quanity column.
If value in the second Quanity column is more that first Quanity column it should display alert.
When I tried comparison based on ID's it works fine with one row but when there are multiply row it does not work.
When I tried comparison based on classes it work on the first row but it not comparing 2nd row.
Thanks in Advance.
NOTE: All the Row are generated dynamically from the back end.
/*avaliable products valadations*/
function validateAvaliable(){
var aproducts = parseInt($( ".available-quanity" ).val());
var sproducts = parseInt($( ".send-quanity" ).val());
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

$( ".available-quanity" ) and $( ".send-quanity" ) both return lists of elements, so you will have to use a loop to compare all values, Also use event.preventDefault() so that the form doesn't submit. something like this:
/*avaliable products valadations*/
function validateAvaliable(event){
event.preventDefault();
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
//console.log(aproducts);
//console.log(sproducts);
for(var i=0;i<aproducts.length;i++){
if (parseInt($(aproducts[i]).val()) < parseInt($(sproducts[i]).val())) {
alert("send products are more");
return false;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable(event)" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

$( ".available-quanity" ) and $( ".send-quanity" ) gives you array of elements (one for each row). So you should iterate over these arrays with some loop:
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
for (var i = 0; i < aproducts.length; i++){
// Values per row:
var aproducts_val = parseInt($(aproducts[i]).val()); // Or just parseInt(aproducts[i].value)
var sproducts_val = parseInt($(sproducts[i]).val());
// ... Compare here ...
}

Multiple rows should be in loop to check the values. Please refer below code snippet..
function validateAvaliable(){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
} );
}
/*avaliable products valadations*/
$('#submit').on('click',function(event){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
event.preventDefault();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table" id="available-products-table" method="POST" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" id="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

Please check this fiddle.
I have added class mytr for tr.
http://jsfiddle.net/pzphbnxb/42/
$(document).on('change', '.send-quanity', function(e){
var elem = $(this);
var changeVal = $(this).val();
var myval = elem.closest('.mytr').find('.available-quanity').val();
if(parseInt(changeVal) > parseInt(myval)){
alert('value greater');
}
});

why isn't calculated value for row being set in input for total?

I have this code that doesn't work to calculate quantity * price - discount = total,
the quantity values are retrieved from a database. Why isn't the calculated total being set on the appropriate total input for the row?
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo
'<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
<td><label for="qty"></label>
<input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="8" ></td>
<td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
<td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
<td><input type="number" name="total'.$i.'" id="total'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
</tr>';
$i++;
}
}
?>
<script>
function calc(id) {
//var row=id.parentNode.parentNode;
var quant=row.cells[4].getElementsByTagName('input')[0].value;
var price=row.cells[5].getElementsByTagName('input')[0].value;
var disc=row.cells[6].getElementsByTagName('input')[0].value;
if(disc==null || disc=='') {
res=parseFloat(quant)*parseFloat(price);
} else {
var res=(parseFloat(quant)*parseFloat(price))- (parseFloat(quant)*parseFloat(price)*(parseFloat(disc)/100));
}
row.cells[7].getElementsByTagName('input')[0].value=res;
}
</script>

There are only a couple changes to be made to have the calculated total placed in the final input of the row:
remove the single-line comment operator (i.e. //) on the first line:
function calc(id) {
//var row = id.parentNode.parentNode;
^
(Maybe this was a left-over from attempts at other ways to define row).
The indexes of the cells within the row variable are off by one. This is because
JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1.
1
so for instance, to get the value for quant, update this line:
var quant = row.cells[4].getElementsByTagName('input')[0].value;
to this:
var quant = row.cells[3].getElementsByTagName('input')[0].value;
and similarly for the values for price and disc, as well as updating the total (i.e. row.cells[6].getElementsByTagName('input')[0].value = res;)
See these changes applied in the example below:
function calc(id) {
var row = id.parentNode.parentNode;
var quant = row.cells[3].getElementsByTagName('input')[0].value;
var price = row.cells[4].getElementsByTagName('input')[0].value;
var disc = row.cells[5].getElementsByTagName('input')[0].value;
if (disc == null || disc == '') {
res = parseFloat(quant) * parseFloat(price);
} else {
var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) * parseFloat(price) * (parseFloat(disc) / 100));
}
row.cells[6].getElementsByTagName('input')[0].value = res;
}
<table>
<tr>
<td></td>
<!--checkbox-->
<td>Code</td>
<td>Name</td>
<td>Quantity</td>
<td>Price</td>
<td>Discount</td>
<td>Total</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check[]" id="check1" value="1">
</td>
<td>
<label for="productCode"></label>
<input type="text" name="productCode1" id="productCode1" readonly value="29" size="12">
</td>
<td>
<label for="productName"></label>
<input type="text" name="productName1" id="productName1" readonly value="wheel" size="35">
</td>
<td>
<label for="qty"></label>
<input type="number" onkeyup="calc(this);" name="qty1" id="qty1" readonly value="2" size="8">
</td>
<td>
<input type="number" onkeyup="calc(this);" name="price1" id="price1" size="10" min="1" max="99" onchange="calc(this);">
</td>
<td>
<input type="number" onkeyup="calc(this);" name="discount1" id="discount1" size="10" min="0" max="99" onchange="calc(this);">
</td>
<td>
<input type="number" name="total1" id="total1" size="10" min="1" max="99" onchange="calc(this);">
</td>
</tr>
</table>
1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Accessing_array_elements

i See that you are using row parameter in your script and it's commented. just after function calc declaration .

Update total in table row with jquery

I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.

You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo

Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here

Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);

Categories

Resources