Changing the value of multiple inputs [duplicate] - javascript

This question already has answers here:
jQuery change input text value
(6 answers)
Closed 3 years ago.
Sorry for the simple question. I have a form with multiple input fields.
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>
I want to change the value of all class=amount inputs to 10. I've tried the following simple script but it doesn't seem to be working?
$(".amount").each(function(){
this.value = '10';
})


If you really just want to change the value of all .amount, no need to iterate them.
$(".amount").val(10)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>


Change your jQuery code to the following:
$(".amount").val(100);


$('.amount').val(10);
OR
$('.amount').each(function(index,element) {
element.value = 10;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></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 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)
});
});
});

Values from multiple tables, Multiple rows, Same page

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>

Validation errors with form

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.

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