I am trying to get the value of a dynamic table cell. following is the code, but i only get undefined
Javascript and HTML given below:
function calcTot(i) {
unitPrice = document.getElementById("invoice_details").rows[i].cells[6].innerHTML.value;//gets the unit price for the item
alert(unitPrice);
quantity = document.getElementById("invoice_details").rows[i].cells[7].childNodes[0].value;
//alert(quantity);
dis = document.getElementById("invoice_details").rows[i].cells[8].children[0].value;
//alert(dis);
final_amt = (parseFloat(unitPrice) * parseFloat(quantity)) - (parseFloat(unitPrice) * parseFloat(quantity) * parseFloat(dis)) / 100;
//alert(final_amt);
document.getElementById("invoice_details").rows[i].cells[9].childNodes[0].value = final_amt.toFixed(2);
//calcTotal();
}
<tbody id="generate_invoice_table">
<tr>
<td><input class="form-control" readonly="" value="57" name="item_id[]"></td>
<td><input class="form-control" readonly="" value="Toyota" name="supplier_name[]"></td>
<td><input hidden="" class="form-control" readonly="" value="Item" name="type[]"></td>
<td><input class="form-control" readonly="" value="Fan Belt Aqua" name="item_description[]"></td>
<td><input class="form-control" readonly="" value="1" name="available_qty[]"></td>
<td><input class="form-control" readonly="" value="12000.00" name="retail_price[]"></td>
<td><input type="text" value="0" class="form-control text-right" name="qty[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" value="0" class="form-control text-right" name="discount[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" class="form-control text-right" name="price[]"></td>
</tr>
</tbody>
Related
The code below, when executed by edge shows a lot of input lag.
Steps to reproduce:
copy paste the snippit in a local html file.
It will not be reproducable from the snippit editor in stackoverflow.
open it with edge
make sure auto fill form fields are ON in edge settings/advanced . there is no need to actually have these form fields
slam your keyboard with random keys (more than 10 keys/sec)
it's a bit rude but necessary to demonstrate. On a production page where there is css, normal typing is enough to see the issue.
Not sure if it matters, Version where this issue works
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
You will see the input still being filled in even if you already stopped slamming the keyboard.
Workaround found but not acceptible for our situation
Disable "save form entries" option in edge. (not acceptable as we cannot force all our users to do this)
remove form element (obviously not acceptable)
<html>
<head>
</head>
<body>
<form method="post">
<div>
<div>
<table>
<tr>
<td><input class="decimal" id="OrderLines_0__AmountExcl" name="OrderLines[0].AmountExcl" type="text" value="45,00" /></td>
<td><input class="decimal" id="OrderLines_0__VAT" name="OrderLines[0].VAT" type="text" value="21,00" /></td>
<td><input class="decimal" id="OrderLines_0__Quantity" name="OrderLines[0].Quantity" type="text" value="1,00" /></td>
<td><input id="OrderLines_0__Unit" name="OrderLines[0].Unit" type="text" value="" /></td>
<td><input id="OrderLines_0__ReductionPercentage" name="OrderLines[0].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_1__AmountExcl" name="OrderLines[1].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_1__VAT" name="OrderLines[1].VAT" type="text" value="" /></td>
<td><input id="OrderLines_1__Quantity" name="OrderLines[1].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_1__Unit" name="OrderLines[1].Unit" type="text" value="" /></td>
<td><input id="OrderLines_1__ReductionPercentage" name="OrderLines[1].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_2__AmountExcl" name="OrderLines[2].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_2__VAT" name="OrderLines[2].VAT" type="text" value="" /></td>
<td><input id="OrderLines_2__Quantity" name="OrderLines[2].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_2__Unit" name="OrderLines[2].Unit" type="text" value="" /></td>
<td><input id="OrderLines_2__ReductionPercentage" name="OrderLines[2].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_3__AmountExcl" name="OrderLines[3].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_3__VAT" name="OrderLines[3].VAT" type="text" value="" /></td>
<td><input id="OrderLines_3__Quantity" name="OrderLines[3].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_3__Unit" name="OrderLines[3].Unit" type="text" value="" /></td>
<td><input id="OrderLines_3__ReductionPercentage" name="OrderLines[3].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_4__AmountExcl" name="OrderLines[4].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_4__VAT" name="OrderLines[4].VAT" type="text" value="" /></td>
<td><input id="OrderLines_4__Quantity" name="OrderLines[4].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_4__Unit" name="OrderLines[4].Unit" type="text" value="" /></td>
<td><input id="OrderLines_4__ReductionPercentage" name="OrderLines[4].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_5__AmountExcl" name="OrderLines[5].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_5__VAT" name="OrderLines[5].VAT" type="text" value="" /></td>
<td><input id="OrderLines_5__Quantity" name="OrderLines[5].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_5__Unit" name="OrderLines[5].Unit" type="text" value="" /></td>
<td><input id="OrderLines_5__ReductionPercentage" name="OrderLines[5].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_6__AmountExcl" name="OrderLines[6].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_6__VAT" name="OrderLines[6].VAT" type="text" value="" /></td>
<td><input id="OrderLines_6__Quantity" name="OrderLines[6].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_6__Unit" name="OrderLines[6].Unit" type="text" value="" /></td>
<td><input id="OrderLines_6__ReductionPercentage" name="OrderLines[6].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_7__AmountExcl" name="OrderLines[7].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_7__VAT" name="OrderLines[7].VAT" type="text" value="" /></td>
<td><input id="OrderLines_7__Quantity" name="OrderLines[7].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_7__Unit" name="OrderLines[7].Unit" type="text" value="" /></td>
<td><input id="OrderLines_7__ReductionPercentage" name="OrderLines[7].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_8__AmountExcl" name="OrderLines[8].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_8__VAT" name="OrderLines[8].VAT" type="text" value="" /></td>
<td><input id="OrderLines_8__Quantity" name="OrderLines[8].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_8__Unit" name="OrderLines[8].Unit" type="text" value="" /></td>
<td><input id="OrderLines_8__ReductionPercentage" name="OrderLines[8].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_9__AmountExcl" name="OrderLines[9].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_9__VAT" name="OrderLines[9].VAT" type="text" value="" /></td>
<td><input id="OrderLines_9__Quantity" name="OrderLines[9].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_9__Unit" name="OrderLines[9].Unit" type="text" value="" /></td>
<td><input id="OrderLines_9__ReductionPercentage" name="OrderLines[9].ReductionPercentage" type="text" value="" /></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Edge performance profiler shows big delays on the input event
And pins it to the AutoFormFill extension which is by default enabled in Edge
Detailed overview getFormIdentifier
Detailed overview Isimple iloop
I have a table with few column, all are disable except two fields.
Compare the value in the first Quanity column with the value in the second Quanity column.
If value in the second Quanity column is more that first Quanity column it should display alert.
When I tried comparison based on ID's it works fine with one row but when there are multiply row it does not work.
When I tried comparison based on classes it work on the first row but it not comparing 2nd row.
Thanks in Advance.
NOTE: All the Row are generated dynamically from the back end.
/*avaliable products valadations*/
function validateAvaliable(){
var aproducts = parseInt($( ".available-quanity" ).val());
var sproducts = parseInt($( ".send-quanity" ).val());
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
$( ".available-quanity" ) and $( ".send-quanity" ) both return lists of elements, so you will have to use a loop to compare all values, Also use event.preventDefault() so that the form doesn't submit. something like this:
/*avaliable products valadations*/
function validateAvaliable(event){
event.preventDefault();
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
//console.log(aproducts);
//console.log(sproducts);
for(var i=0;i<aproducts.length;i++){
if (parseInt($(aproducts[i]).val()) < parseInt($(sproducts[i]).val())) {
alert("send products are more");
return false;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable(event)" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
$( ".available-quanity" ) and $( ".send-quanity" ) gives you array of elements (one for each row). So you should iterate over these arrays with some loop:
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
for (var i = 0; i < aproducts.length; i++){
// Values per row:
var aproducts_val = parseInt($(aproducts[i]).val()); // Or just parseInt(aproducts[i].value)
var sproducts_val = parseInt($(sproducts[i]).val());
// ... Compare here ...
}
Multiple rows should be in loop to check the values. Please refer below code snippet..
function validateAvaliable(){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
} );
}
/*avaliable products valadations*/
$('#submit').on('click',function(event){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
event.preventDefault();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table" id="available-products-table" method="POST" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" id="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
Please check this fiddle.
I have added class mytr for tr.
http://jsfiddle.net/pzphbnxb/42/
$(document).on('change', '.send-quanity', function(e){
var elem = $(this);
var changeVal = $(this).val();
var myval = elem.closest('.mytr').find('.available-quanity').val();
if(parseInt(changeVal) > parseInt(myval)){
alert('value greater');
}
});
This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal
Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>
I am working on a project. I wanted to subtract the value of the begbal input box and the nearest amtcoll input box and put the result on the nearest endbal inputbox.
My HTML code is:
<tr>
<td><input type="number" name="amtcoll[]" id="amtcoll" class="form-control text-right" value="2000.00"></td>
<td><input type="number" name="begbal[]" id="begbal" class="form-control text-right" value="0.00"></td>
<td><input type="number" name="endbal[]" id="endbal" class="form-control text-right" value="0.00"></td>
</tr>
<tr>
<td><input type="number" name="amtcoll[]" id="amtcoll" class="form-control text-right" value="1000.00"></td>
<td><input type="number" name="begbal[]" id="begbal" class="form-control text-right" value="0.00"></td>
<td><input type="number" name="endbal[]" id="endbal" class="form-control text-right" value="0.00"></td>
</tr>
And my JavaScript so far I use is:
<script type="text/javascript">
$(document).ready(function(){
$("input[name^=begbal]").change(function() {
$(this).closest("tr").find("input[name^=endbal]").value = $(this).closest("tr").find("input[name^=begbal]").value - $(this).closest("tr").find("input[name^=amtcoll]").value;
});
});
</script>
I wanted to as I type on the begbal input the result of subtraction will be passed on to the nearest endbal. But there is no value passed on the nearest endbal input. Please help. I can get how can I solve this problem. Thanks.
For getting the value of input you need use val not value
$("input[name^=begbal]").change(function () {
$(this).closest("tr").find("input[name^=endbal]").val( $(this).closest("tr").find("input[name^=begbal]").val() - $(this).closest("tr").find("input[name^=amtcoll]").val());
});
Please Try this :
$(document).ready(function(){
jQuery("input[name^=begbal]").on('input', function() {
var amtVal = $(this).closest("tr").find("input[name^=amtcoll]").val();
var begalVal = $(this).closest("tr").find("input[name^=begbal]").val();
$(this).closest("tr").find("input[name^=endbal]").val(parseInt(begalVal - amtVal));
});
});
For what it's worth - here's another, which avoids going too far up and down the DOM. Note - you should not have two elements with the same ID.
$(document).ready(function() {
$("input[class^=begbal]").change(function() {
var endbal = $(this).val() - $(this).prev('.amtcoll').val();
$(this).next('.endbal').val(endbal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="number" name="amtcoll[]" class="amtcoll" class="form-control text-right" value="2000.00">
</td>
<td>
<input type="number" name="begbal[]" class="begbal" class="form-control text-right" value="0.00">
</td>
<td>
<input type="number" name="endbal[]" class="endbal" class="form-control text-right" value="0.00">
</td>
</tr>
<tr>
<td>
<input type="number" name="amtcoll[]" class="amtcoll" class="form-control text-right" value="1000.00">
</td>
<td>
<input type="number" name="begbal[]" class="begbal" class="form-control text-right" value="0.00">
</td>
<td>
<input type="number" name="endbal[]" class="endbal" class="form-control text-right" value="0.00">
</td>
</tr>
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(?);