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>
Related
I'm trying to loop through all the <td> in each <tr> in this table in order to assign a value to each <td>.
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
So far I've tried this:
const grid = document.getElementById("grid");
const row = grid.getElementsByTagName('tr');
const cell = row.getElementsByTagName('td');
for(row in grid) {
for(cell in row) {
cell.textContent = "1";
}
}
But it errors with TypeError: row.getElementsByTagName is not a function.
How can I fix this?
You can use document.querySelectorAll('td') to get all of your cells and then you can loop through it by using forEach for example.
// looping through the inputs inside the cells
// to demonstrate that it works I log the id of the input field
document.querySelectorAll('td > input').forEach((x) => {
console.log(x.id)
})
// here looping through the cells
document.querySelectorAll('td').forEach((x) => {
console.log(x)
})
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
There is a web page, which contains 3 tables. "Total Opt Out" on page load is the sum of values from each table, all the rows, all the values.
When every record from the table is selected all the values from that row should be added together and subtracted from the total.
If the entire table is selected then all the values from all the rows should be added together and subtracted from "Total Opt Out" value.
With multiple tables, check and un-check records/ tables, finding it difficult. I have posted my code. Please provide me an idea on how to solve this?
Code as follows:
$(document).ready(function() {
$("#countUS").click(function() {
var table = document.getElementById("countryUS");
var val = table.rows[0].cells[0].children[0].checked;
var totalCountUSA = 0;
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].cells[0].children[0].checked = val;
}
if (val === true) {
$('#countryUS :checked').each(function() {
var totalAmount = $(this).parents('tr:eq(0)');
if ($(totalAmount).find('td:eq(2)').text() != '') {
totalCountUSA += Number($(totalAmount).find('td:eq(2)').text().replace(/[^0-9.-]+/g, "")) +
Number($(totalAmount).find('td:eq(3)').text().replace(/[^0-9.-]+/g, "")) +
Number($(totalAmount).find('td:eq(4)').text().replace(/[^0-9.-]+/g, ""));
}
$('#totalOptOut').val(totalCountUSA);
});
} else {
$('#totalOptOut').val("0.00");
}
});
});
function calculateTotal(countryCode) {
var theTable = 0;
var theTotal;
var countChecked = 0;
theTable = document.getElementById(countryCode);
for (x = 0; x < theTable.tBodies[0].rows.length; x++) {
for (y = 0; y < theTable.tBodies[0].rows[x].cells[0].children.length; y++) {
if (theTable.tBodies[0].rows[x].cells[0].children[y].tagName.toUpperCase() == "INPUT") {
if (theTable.tBodies[0].rows[x].cells[0].children[y].type.toUpperCase() == "CHECKBOX") {
if (theTable.tBodies[0].rows[x].cells[0].children[y].checked == false) {
if (theTable.tBodies[0].rows[x].cells[2].textContent) {
theTotal += (parseFloat(theTable.tBodies[0].rows[x].cells[2].textContent.toString().replace(/\$|\,/g, '')) +
parseFloat(theTable.tBodies[0].rows[x].cells[3].textContent.toString().replace(/\$|\,/g, '')) +
parseFloat(theTable.tBodies[0].rows[x].cells[4].textContent.toString().replace(/\$|\,/g, '')) +
parseFloat(theTable.tBodies[0].rows[x].cells[5].textContent.toString().replace(/\$|\,/g, '')));
} else {
theTotal += (parseFloat(theTable.tBodies[0].rows[x].cells[2].innerText.toString().replace(/\$|\,/g, '')) +
parseFloat(theTable.tBodies[0].rows[x].cells[3].innerText.toString().replace(/\$|\,/g, '')) +
parseFloat(theTable.tBodies[0].rows[x].cells[4].innerText.toString().replace(/\$|\,/g, '')) +
parseFloat(theTable.tBodies[0].rows[x].cells[5].innerText.toString().replace(/\$|\,/g, '')));
}
countChecked++;
}
break;
}
}
}
}
if (countChecked === theTable.tBodies[0].rows.length) {
if (countryCode === countryUS)
document.getElementById("countUS").checked = true;
else if (countryCode === countryCAN)
document.getElementById("countUS").checked = true;
} else {
if (countryCode === countryUS)
document.getElementById("countUS").checked = false;
else if (countryCode === countryCAN)
document.getElementById("countUS").checked = false;
}
$("totalOptOut").val(theTotal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Total Opt Out: <input type="text" id="totalOptOut" value="24750" disabled>
</p>
<table id="countryUS">
<thead>
<tr>
<th><input type="checkbox" id="countUS"> </th>
<th>State</th>
<th>Men</th>
<th>Women</th>
<th>Kids (Under age 12)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="state" value="Texas" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="state" value="Arkansas" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="state" value="Arizona" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
</tbody>
</table>
<table id="countryCAN">
<thead>
<tr>
<th><input type="checkbox"> </th>
<th>State</th>
<th>Men</th>
<th>Women</th>
<th>Kids (Under age 12)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="province" value="Ontario" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="province" value="Qubec" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="province" value="Alberta" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
</tbody>
</table>
<table id="countryMEX">
<thead>
<tr>
<th><input type="checkbox"> </th>
<th>State</th>
<th>Men</th>
<th>Women</th>
<th>Kids (Under age 12)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td><input type="text" name="state" value="Jalisco" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="text" name="state" value="Puebla" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="text" name="state" value="Oaxaca" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
</tbody>
</table>
Since you're using the jQuery you could achieve that using some extra classes like :
$(document).ready(function() {
var inputs_selector = '[name="men"],[name="women"],[name="kids"]';
//Check the clicked table rows
$(".check").change(function() {
var inputs = $(this).closest('tr').find(inputs_selector);
if ($(this).is(':checked')) {
inputs.addClass('selected');
} else {
inputs.removeClass('selected');
}
calculateTotal();
});
//Check all the table rows
$(".check-all").click(function() {
var self = $(this);
$(this).closest('table').find(':checkbox').not(this).each(function() {
$(this).prop('checked', self.is(':checked')).change()
})
calculateTotal();
});
calculateTotal();
});
//Calculate the total of all tables
function calculateTotal() {
var total = 0;
var inputs_selector = '[name="men"]:not(".selected"),[name="women"]:not(".selected"),[name="kids"]:not(".selected")';
$('table').each(function() {
var inputs = $(this).find(inputs_selector);
inputs.each(function() {
total += Number($(this).val());
});
})
$('#totalOptOut').val(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Total Opt Out: <input type="text" id="totalOptOut" value="0" disabled>
</p>
<table id="countryUS">
<thead>
<tr>
<th><input type="checkbox" class='check-all' id="countUS"> </th>
<th>State</th>
<th>Men</th>
<th>Women</th>
<th>Kids (Under age 12)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class='check'></td>
<td><input type="text" name="state" value="Texas" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" class='check'></td>
<td><input type="text" name="state" value="Arkansas" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" class='check'></td>
<td><input type="text" name="state" value="Arizona" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
</tbody>
</table>
<table id="countryCAN">
<thead>
<tr>
<th><input type="checkbox" class='check-all'> </th>
<th>State</th>
<th>Men</th>
<th>Women</th>
<th>Kids (Under age 12)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class='check'></td>
<td><input type="text" name="province" value="Ontario" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" class='check'></td>
<td><input type="text" name="province" value="Qubec" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" class='check'></td>
<td><input type="text" name="province" value="Alberta" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
</tbody>
</table>
<table id="countryMEX">
<thead>
<tr>
<th><input type="checkbox" class='check-all'> </th>
<th>State</th>
<th>Men</th>
<th>Women</th>
<th>Kids (Under age 12)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class='check' /></td>
<td><input type="text" name="state" value="Jalisco" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" class='check' /></td>
<td><input type="text" name="state" value="Puebla" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
<tr>
<td><input type="checkbox" class='check' /></td>
<td><input type="text" name="state" value="Oaxaca" disabled></td>
<td><input type="text" name="men" value="1000" disabled></td>
<td><input type="text" name="women" value="1000" disabled></td>
<td><input type="text" name="kids" value="750" disabled></td>
</tr>
</tbody>
</table>
I am doing an assignment for school and it is a restaurant website. I am working on the "order online" page. I must include a table in my website so I put it in my form with all of my menu items and their cost and the total. The problem I am having is: I have each menu item wrapped in a form element in order to make my Javascript work but when I try to validate it, I get errors because my fieldset is outside of a form element and if I move it around I go from 3 errors to 150 and I just don't really understand why. Also, this is causing a problem with my reset button because the reset button is in a different form element then each menu item, and finally I can't get my grand total at the bottom working.
<!DOCTYPE html>
<html>
<head>
<title>Lefebvre-Oliver Final Assignment</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="Final2.css" media="screen">
</head>
<body>
<script type="text/javascript">
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
</script>
<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="file:///D:/Final%20Project/index.html"/>
<h1>Order Online</h1>
<fieldset>
<legend>Basic Information</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value=""/>
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="address" id="address" value=""/>
</li>
<li>
<label for="pwd">City</label>
<input type="text" name="city" id="city" value=""/>
</li>
</ul>
<div>Would you like the same order as last time?</div>
<label for="yes">Yes</label>
<input type="radio" name="yes" id="yes" value="yes" checked="checked">
<label for="no">No</label>
<input type="radio" name="yes" id="no" value="no"/>
<div>Special Instructions:</div>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</fieldset>
<fieldset>
<legend>Order</legend>
<table id="OrderTable" style="width:100%">
<tr>
<th>Food Item</th>
<th>Quantity</th>
<th>Unit Price in ($)</th>
<th>Total Price in ($)</th>
</tr>
<tr>
<th>Appetizers</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Spiedini di Albicocca al Prosciutto Crudo</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="9" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tortino di Gorgonzola</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Soup and Salads</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Zuppa di Giorno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Minestrone Piemontese</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuppa de Pesce</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Mista</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Fagioli</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pizza</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Margherita</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="10" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Sicilian</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Chicken Florentine</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pasta</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bucatini all'Amatriciana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="16" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Rigatoni Alla Siciliana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Paglia e Fieno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Orecchiette con Rapini</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Pappardelle con Sugo di Coniglio</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="15" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Dessert</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Chocolate Zabaglione Cake</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuccotto</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tira Misu</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Beverages</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sparkling Water</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coke, Iced Tea, Root Beer, Cream Soda</td>
<td><input name="QTY"></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coffee and Brewed Decaf</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Cappuccino or Americano</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Total Cost:</td>
<td></td>
<td></td>
<td><label>Total amount</label>
<input disabled></td>
</tr>
</table>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset"/>
</fieldset>
</form>
</body>
</html>
Use a single form element around everything and you can still access the correct inputs, relative to the row.
For example, your function could look like:
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
First it gets the row that contains the three inputs, then from there it finds the TOTAL and PRICE inputs by name using querySelectorAll.
Note: querySelectorAll isn't supported by IE7 or lower but I doubt that will matter for an assignment.
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(?);
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?
}