Validation errors with form - javascript

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.

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>

Changing the value of multiple inputs [duplicate]

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>

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(?);

Want create rows and columns based on item selection and item size selection want to create same as below HTML table dynamically

<!DOCTYPE html>
<html>
<head>
<title>table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<style>
.err{border:1px solid red; outline:none;}
.txtfld:readonly{border:none;}
.txtfld{ width:50px;}
</style>
<body>
<div><span>Items:<br>
<select class="items">
<option value="">Select Items</option>
<option value="">Items 6356</option>
<option value="">Items 5700</option>
<option value="">Items 500</option>
</select>
</div>
<input type="button" value="Add Items"/>
<hr>
<div>Item sizes:<br>
<p><input type="checkbox"> 8x10 in</p>
<p><input type="checkbox"> 8x10 in Mammo</p>
<p><input type="checkbox"> 10x12 in</p>
<p><input type="checkbox"> 10x12 in Memmo</p>
<p><input type="checkbox"> 11x14 in</p>
<p><input type="checkbox"> 14x14 in</p>
<p><input type="checkbox"> 14x17 in</p>
</div>
</span>
<table width="580" border="1" class="printer-row">
<tbody><tr>
<td> </td>
<td>8X10 in</td>
<td>10X12 in</td>
<td>8X10 in Memmo</td>
<td>10X12 in Memmo</td>
<td>11X14 in</td>
<td>14X14 in</td>
<td>14X17 in</td>
<td>Total sheets/year</td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit" readonly=""></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 400</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 3000</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Total sheets/year</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
</body
> Blockquote
</html>
I want to create the table rows and columns based on the Item select options "Add more" button will append the "new item" based on that selected items i want to create rows with selected item names. In second case based on "Item size" checkbox i need to create column with their respective names" you may refer the HTML Table to more clarification

Check this code, I have added the feature
Point to check:
- I have added a javascript fucntion add_row() and calling on click of add button.
I have added value to select dropdown.
table
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
function add_row() {
var row_name = $('select').val();
if (row_name != "") {
var row = $('<tr><td>' + row_name + '</td></tr>');
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
row.append('<td><input class="txtfld" type="text" placeholder="edit"></td>')
} else {
row.append('<td></td>')
}
})
row.append('<td></td>')
$("table.printer-row tbody tr:last").before(row)
}
}
</script>
</head>
<style>
.err{border:1px solid red; outline:none;}
.txtfld:readonly{border:none;}
.txtfld{ width:50px;}
</style>
<body>
<div><span>Items:<br>
<select class="items">
<option value="">Select Items</option>
<option value="Items 6356">Items 6356</option>
<option value="Items 5700">Items 5700</option>
<option value="Items 500">Items 500</option>
</select>
</div>
<input type="button" value="Add Items" onclick="add_row();">
<hr>
<div>Item sizes:<br>
<p><input type="checkbox"> 8x10 in</p>
<p><input type="checkbox"> 8x10 in Mammo</p>
<p><input type="checkbox"> 10x12 in</p>
<p><input type="checkbox"> 10x12 in Memmo</p>
<p><input type="checkbox"> 11x14 in</p>
<p><input type="checkbox"> 14x14 in</p>
<p><input type="checkbox"> 14x17 in</p>
</div>
</span>
<table width="580" border="1" class="printer-row">
<tbody><tr>
<td> </td>
<td>8X10 in</td>
<td>10X12 in</td>
<td>8X10 in Memmo</td>
<td>10X12 in Memmo</td>
<td>11X14 in</td>
<td>14X14 in</td>
<td>14X17 in</td>
<td>Total sheets/year</td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit" readonly=""></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 400</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 3000</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Total sheets/year</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
</body> Blockquote
</html>

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?
}

Categories

Resources