change event on multiple text box in a modal

change event on multiple text box in a modal - javascript

I have a table and each row of the table has a checkbox, textbox and name field.
Following is the html
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
<td>Name</td>
<td><input type="text" name="factor" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
</tr>
i want to read the value as soon as it is entered in any of the text box with name = position

Please Have a look
$("input[name='position']").keyup(function() {
var valueOfInput = $(this).val(); //value
var indexOfTr = $(this).parents('tr').index(); //index
console.log(valueOfInput, '-->', indexOfTr);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="w" /></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>

you can use name as array and make common class name for input field...
hope it work...
$('.myclassname').on("keyup",function(){
var row_index = $(this).closest("tr").index();
// row_index = row_index-1; // if you have tr header then enable this also...
var textvalue = $("[name='position[]']").eq(row_index).val();
alert(textvalue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</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>

Specify table style changes with checkbox selection

Is there a way that I can change the style of a selected row, to whatever with a checkbox selection. The styles will change for the selected rows when the "click me" button is selected. I am able to delete the rows (with another button), but not change the styles of the selected rows. The rows will either be deleted or the style will change.
Can someone assist me, or show me in the right direction for the styling issue?
HTML:
<input class="dent" type="button" value="style">
<input class="delBtn" type="button" value="Delete">
<table>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
</table>
JS to delete a row
function delBoxes() {
let boxes = document.getElementsByClassName('chk');
for (let i = 0; i < boxes.length; i++) {
let box = boxes[i];
if (box.checked) {
let rowTag = box.parentNode.parentNode;
let tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);

I have made a few changes to your HTML, adding ID's for the buttons and rows. Also I added data-sets to the check boxes so you can know which rows to execute the task (change style or remove)
function delBoxes() {
let boxes = document.getElementsByClassName('chk');
for (let i = boxes.length - 1; i >= 0; i--) {
let box = boxes[i];
if (box.checked) {
let rowTag = document.getElementById(box.dataset.row);
rowTag.parentNode.removeChild(rowTag);
}
}
}
function style() {
let boxes = document.getElementsByClassName('chk');
for (let i = boxes.length - 1; i >= 0; i--) {
let box = boxes[i];
if (box.checked) {
let rowTag = document.getElementById(box.dataset.row);
rowTag.style.backgroundColor = "red";
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
document.getElementById("styleButton").addEventListener("click", style);
<input class="dent" type="button" value="style" id="styleButton">
<input class="delBtn" type="button" value="Delete" id="deleteButton">
<table>
<tr id="row1">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row1">
</td>
<td><input type="text" value="I am 1"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row2">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row2">
</td>
<td><input type="text" value="I am 2"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row3">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row3">
</td>
<td><input type="text" value="I am 3"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row4">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row4">
</td>
<td><input type="text" value="I am 4"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>

How to search by filter in a table with rowspan

I need to search all my table and display the corresponding line.
I can not display the result of the search correctly when the search is on the first column, this column contains a rowspan. Instead of displaying the 2 or 3 corresponding lines, it's just the first one displayed
Input search
<div>
<input id="searchInput" type="text" placeholder="Search.."
</div>
a table
<table border="1" id="mytable">
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
<th>Item4</th>
<th>Item5</th>
<th>Item6</th>
<th>Item7</th>
<th>Item8</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td rowspan='1'>D20180910</td>
<td>10910</td>
<td>W1</td>
<td><input type="text" value="2018-09-11 07:36:32" id="iddb_164" ></td>
<td><input type="text" value="2018-09-11 18:47:00" id="iddb_320" ></td>
<td><input type="text" value="2018-09-11 20:28:54" id="iddb_166" ></td>
<td><input type="text" value="2018-09-13 11:40:00" id="iddb_318" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='2'>D20180905</td>
<td>10905</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_147" ></td>
<td><input type="text" value="2018-09-06 12:00:00" id="iddb_324" ></td>
<td><input type="text" value="2018-09-06 12:42:04" id="iddb_152" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>10905</td>
<td>W1</td>
<td><input type="text" value="2018-09-06 08:14:48" id="iddb_146" ></td>
<td><input type="text" value="2018-09-06 11:59:00" id="iddb_325" ></td>
<td><input type="text" value="2018-09-06 12:41:58" id="iddb_150" ></td>
<td><input type="text" value="2018-09-10 08:21:00" id="iddb_321" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='3'>D20180905</td>
<td>20105</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_112" ></td>
<td><input type="text" value="2018-09-01 12:12:00" id="iddb_753" ></td>
<td><input type="text" value="2018-10-06 12:50:04" id="iddb_725" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>w1</td>
<td><input type="text" value="" id="iddb_146" ></td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_412" ></td>
<td><input type="text" value="2018--07 13:21:58" id="iddb_356" ></td>
<td><input type="text" value="2018-07-10 09:51:00" id="iddb_741" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>F4</td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_174" ></td>
<td><input type="text" value="" id="iddb_925" ></td>
<td><input type="text" value="" id="iddb_825" ></td>
<td><input type="text" value="2018-08-15 09:51:00" id="iddb_124" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
</tbody>
</table>
A javascript code
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

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

Could Not Jquery field in Php

I create a add item page where i implement autucomplete textbox and auto multiplication using jquery.
when i use autucomplete textbox multiplication cannot work.
My Jquery Code is....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$(".product").autocomplete("autocomplete1.php", {
selectFirst: true
});
$(".brand").autocomplete("autocomplete2.php", {
selectFirst: true
});
$(".model").autocomplete("autocomplete3.php", {
selectFirst: true
});
});
</script>-->
<script type="text/javascript">
$(document).ready(function() {
$(".product").autocomplete("autocomplete1.php", {
selectFirst: true
});
$(".brand").autocomplete("autocomplete2.php", {
selectFirst: true
});
$(".model").autocomplete("autocomplete3.php", {
selectFirst: true
});
$('#dataTable').on('keyup', '.price', calTotal)
.on('keyup', '.quantity', calTotal);
// find the value and calculate it
function calTotal() {
var $row = $(this).closest('tr'),
price = $row.find('.price').val(),
quantity = $row.find('.quantity').val(),
total = price * quantity;
// change the value in total
$row.find('.txt').val(total)
}
});
</script>
My html code is...
<TABLE id="dataTable" class="dataTable" width="350px" border="1">
<tr> <th></th>
<th width="144"><div align="center"><strong>Product Name</strong></div></th>
<th width="146"><div align="center"><strong>Brand Name</strong></div></th>
<th width="146"><div align="center"><strong>Model No</strong></div></th>
<th width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></th>
<th width="146"><div align="center"><strong>Quantity (Q)</strong></div></th>
<th width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</th>
<th width="153"><div align="center"><strong>Description</strong></div></th>
</tr>
<tbody>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model"/></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand"/></td>
<td><input type="text" name="model[]" id="model" class="model"/></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
</tbody>
</TABLE>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
<table width="1206" border="0">
<tr>
<td width="753"> </td>
<td width="124"><input name="btn" type="button" id="btn" value="Grand Total"/></td>
<td width="315"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<!--<td colspan="2">Transport Price:
<input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Grand Total:
<input type="text" name="grandt" id="grandt" /></td>
</tr>-->
</table>
How can i do it
Please help!!

If you're using a textbox and want to see if the input is changed, use:
$('#your-text-box').on('input', function() {
//Do your calculation
//Show it in your other textbox perhaps?
}

Develop Reference

JavaScript is the programming language of the Web.

change event on multiple text box in a modal - javascript

Related

How to change grand total only for one table

Specify table style changes with checkbox selection

How to search by filter in a table with rowspan

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

Could Not Jquery field in Php

Categories

Resources