I have a table with two inputs per row and I am trying to calculate the difference between each input for that row and display it in the 3rd column.
I have looked around and tried answers from
Here, here, here and here as well as others and none seem to work for me.
$(".calibration_input_lin").blur(function(){
var input = $(this)
var val = input.val()
var row = input.parents('tr').eq(0)
var req = input.closest('td').prev().val()
var res = $(".resolution").data("resolution")
var diff = difference = val - req
var diff = diff.toFixed(res)
$.ajax({
url: "<%= customer_asset_calibration_header_path(#customer,#asset,#calibration_header) %>",
data: { value: val }
}).done(function( response ) {
row.find(".calibration_lin_input_diff").text(diff)
window.alert(req);
});
// or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
<thead>
<tr>
<th>Weights</th>
<th>Required</th>
<th>Actual</th>
<th>Difference</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
</tbody>
<table>
I use the same script elsewhere and it works fine when the req variable is static accross all table rows. I just can't seem to get it to pick up the input in td 2.
Any help would be appreciated.
Instead of using blur you can use input. You can target the parent to get the prev() td's input value on each input change.
You have to set initial value as 0 when there is no value exist in the input. You can do so by using ternary operator.
There is no element with .resolution in the HTML whose data is used in toFixed().
You can try the following way:
$(".calibration_input_lin").on('input', function(){
var input = $(this)
var val = input.val()? input.val() : 0;
var row = input.parents('tr').eq(0)
var req = input.parents('td').prev('td').find('input').val();
req = req ? req : 0;
//var res = $(".resolution").data("resolution")
var diff = val - req;
var diff = diff.toFixed(2);
$(this).parents('tr').find('.calibration_lin_input_diff').text(diff);
// or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
<thead>
<tr>
<th>Weights</th>
<th>Required</th>
<th>Actual</th>
<th>Difference</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
</tbody>
<table>
Related
I have two element inside <tr>:
<table>
<tbody>
<tr>
<td><input type="text" class="form-control input-state" onclick="myfunction(this)"></td>
<td><input type="text" class="form-control input-city" onclick="myfunction(this)"></td>
</tr>
</tbody>
</table>
in the myfunction I want to check if element with cartain class exist or not:
if($(thisElem).closest("tr").find(".input-city").length){
console.log('true')
}
but $(thisElem).closest("tr").find(".input-city").length is always 0 !
how do I check this element existance?
This is to show that the problem is due to the invalid html since tr should be wrapped inside a table like this demo shows:
function myfunction(target){
if($(target).closest("tr").find(".input-city").length){
console.log('true');
}else{
console.log('false');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Working</h1>
<table>
<tr>
<td><input type="text" class="form-control input-state" onclick="myfunction(this)"></td>
<td><input type="text" class="form-control input-city" onclick="myfunction(this)"></td>
</tr>
</table>
<h1>Not Working</h1>
<tr>
<td><input type="text" class="form-control input-state" onclick="myfunction(this)"></td>
<td><input type="text" class="form-control input-city" onclick="myfunction(this)"></td>
</tr>
I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.
If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />
var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />
I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
i want to inset my javascript id in to the place of input value .
if i give Interest name input value="100"
how can i get tc named table input value="75"
my input form
<tr>
<th>Loan Amount</th>
<th>INTEREST RATE %</th>
<tr>
<tbody>
<td><input disabled type="" name="tc" id="int_amount" class="formcontrol"value=""/></td>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate();"/ class="form-control" value=""/></td>
</tr>
</tbody>
javascript
var vatti = document.pricecal.Interest.value;
var Total = vatti -25;
if(vatti = null)
{
document.getElementById("int_amount").innerHTML = "Rs:"+" "+Total;
}
[want out put like this][1]
Hope this helps you.
function calculate(interest){
var vatti = interest.value;
if (vatti != '') {
var Total = vatti - 25;
document.getElementById("int_amount").value = Total;
}else{
document.getElementById("int_amount").value = '';
}
}
<table>
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate(this)" onchange="calculate(this)" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
</table>
Set the .value of the <input> element, not the .innerHTML
document.getElementById("int_amount").value = "Rs:"+" "+Total;
HTML:
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
Javascript:
document.getElementById('input2').onkeyup = function() {
document.getElementById('int_amount').value = (this.value != '') ? 'Rs: ' + (parseInt(this.value)-25) : '';
}
Here is a tutorial i followed for reference: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html
Here is my javascript....
<script type="text/javascript">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$("#btn").click(function(){
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
</script>
This is my html code to show the sum value..
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="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" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="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="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="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="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="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="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="905"> </td>
<td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>
<td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>
How to show this sum value in textbox after button click.
Please help...
try this with val() method I have edited the answer..
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$("#btn").click(function () {
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
here is the Fiddle
Okay, so I know this is the kind of answer that annoys people but...
Have you tried debuging javascript? It is possible to debug javascript code. For example using firebug: https://getfirebug.com/javascript . It might help.
Also, where are you assigning value of Sum to anything? Are you sure you did not want sum to be global variable (outside of any function)?
$('#idOfTextBox').val(sum.toFixed(2));
I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>
First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.