Develop Reference

How to calculate in this JQuery

I have a problem in jQuery in html. Just need some changes in calculation, below are my codes All result will be calculated in one field as I did
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1"></script>
<script>
$(document).on('keyup','input.expenses','input.deductions',function(){
$expenses = $(this).parents('tr').find('.expenses');
$deductions = $(this).parents('tr').find('.deductions');
$expenseTotal = $(this).parents('tr').find('#total');
$expenseTotal.val('0');
$.each($expenses,function(index,object){
if($(object).val()!='')
{
$expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
}
})
});
</script>
</pre>
< <tbody>';
foreach($data as $d)
{
print '<tr>
<td>'.$d["staff_name"].'</td>
<td><input type="hidden" name="txtid[]" value="'.$d["id"].'">
<input type="text" name="txtbasic[]" class="form-control expenses">
</td>
<td><input type="text" name="txtallowance[]" class="form-control expenses"></td>
<td><input type="text" name="txtsocso[]" class="form-control deductions"></td>
<td><input type="text" name="txtkwsp[]" class="form-control deductions"></td>
<td><input type="text" id="total" name="txttotal[]" class="form-control"></td>
</tr>';
}
print '</tbody>
Existing result
txttotal = txtbasic + txtallowance
The result i need is
txttotal = txtbasic + txtallowance - txtsocso - txtkwsp
Then display the result on key up, Please anyone can help me

There are a few logic/structure issues with your code so I'll first explain each of them, then at the bottom you can find the resulting code
KeyUp event wrong syntax
To be sure you listed to the keyup even on all fields, you need to separate with the comma within the same parameter, so instead of being
on('keyup','input.expenses','input.deductions',function()
It must be
on('keyup','input.expenses, input.deductions',function()
Using ID in loop
You're using a foreach loop to generate your table rows. So you'll have a lot of rows with the same content, which is fine. However, for the last cell of your row, you're using id="total" which is wrong because in any HTML page there can only be 1 element with a unique id. With your code, you will have all rows having the same ID for the last td.
So you need to remove the ID and use a class instead.
From
input type="text" id="total" name="txttotal[]" class="form-control"
You go to
input type="text" name="txttotal[]" class="form-control total"
Correctly loop the elements
Currently your code only loops the .expenses so the txtbasic and txtallowance values. You also need to loop the deductions to obtain txtsocso and txtkwsp
Final Code
Javascript
<script>
$(document).on('keyup', 'input.expenses, input.deductions', function () {
var total = 0;
// Adding txtbasic and txtallowance
$expenses = $(this).parents('tr').find('.expenses');
$.each($expenses, function (index, object) {
var val = parseInt($(object).val())
if(!isNaN(val) && val) {
total += parseInt($(object).val());
}
});
// Adding txtsocso and txtkwsp
$deductions = $(this).parents('tr').find('.deductions');
$.each($deductions, function (index, object) {
var val = parseInt($(object).val())
if(!isNaN(val) && val) {
total -= parseInt($(object).val());
}
});
// Updating the Total
$expenseTotal = $(this).parents('tr').find('.total');
$expenseTotal.val(total)
});
</script>
HTML TR Code
<tr>
<td>'.$d["staff_name"].'</td>
<td><input type="hidden" name="txtid[]" value="'.$d["id"].'">
<input type="text" name="txtbasic[]" class="form-control expenses">
</td>
<td><input type="text" name="txtallowance[]" class="form-control expenses"></td>
<td><input type="text" name="txtsocso[]" class="form-control deductions"></td>
<td><input type="text" name="txtkwsp[]" class="form-control deductions"></td>
<td><input type="text" name="txttotal[]" class="form-control total"></td>
</tr>
</tbody>
</table>
``

How to set min and max data for child elements

Hello I can't set min and maximum value from database.
Actually I want to make dynamic it through PHP. In the back-end there should be two fields first minimum and second one with maximum. In maximum field, I can set maximum and in minimum field I can set, and call it through PHP in my coding.
Is that something can we do? here's coding.
<html>
<body>
<head>
</head>
<?php
echo '
<script>
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
</script>';
$maxnum = 7;
if(num > $maxnum){
echo "<script>alert('Yes it is big');</script>";
}
?>
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
</body></html>
how can I use php with jquery or should I change my coding. I don't know how I can change my coding is there any idea please?

you could put all values into an array and then get the min/max
$(document).on("change", ".qty1", function() {
var arr = [];
var sum = 0;
$(".qty1").each(function(){
arr.push($(this).val());
sum += +$(this).val();
});
$(".total").val(sum);
$("#min").val(Math.min.apply(Math, arr));
$("#max").val(Math.max.apply(Math, arr));
});
Working fiddle https://jsfiddle.net/w47fLjcu/

HTML form:input calculate 2 fields

I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?

Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/

$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box

Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />

how subtracting fields by Javascript

I want to subtract 2 number fields, both fields have a mask in this format: 00.000,00
I do not have a 'submit' button, I would like to do it using onKeyPress
here is my code:
<label>FIELD 1:</label>
<td width="80%">
<input type="text" name="field1" id="field1" size="15" onKeyPress="return(mascaraMoeda(this,'.',',',event))" />
</td>
<label for="valorDesconto">FIELD2</label>
<td width="80%">
<input type="text" name="field2" id="field2" size="15" onKeyPress="return(mascaraMoeda(this,'.',',',event))" />
</td>
here is the result
<label>Resul:</label>
<input type="text" name="Resul" id="Resul" size="15" />
How can I implement another function that subtract both fields?

$('#field1, #field2').on('keypress keydown keyup', function (event) {
var difference = parseFloat($('#field1').val()) - parseFloat($('#field2').val());
// do something with the difference
});
This will bind keypress, keydown, keyup to each of your inputs and substract the value of the second one from the value of the first.

You should add a field in which you can put your result:
<input type="text" id="result" />
Then in your mascaraMoeda method add:
difference = parseFloat(document.getElementById("field1").value.replace(".","").replace(",",".")) - parseFloat(document.getElementById("field1").value.replace(".","").replace(",","."));
document.getElementById("result").value = difference;

Get total of all input values with jQuery

I need the total of all the values from my input. The result must be displayed in the input field total that is readonly.
The user can enter 1 or more values. The problem is that my var value is not correct. I'd also like to know how I can return the value immediately by onchange?
$(document).ready(function() {
$("div#example input").change(function() {
var value = '';
$("div#example input[name!=total]").each(function() {
value += $(this).val();
});
console.log("value after each: " + value);
});
})
HTML:
<div id="example">
<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />
<input type="text" size="5" id="value3" name="value3" />
<input type="text" size="5" id="value4" name="value4" />
<input type="text" size="5" id="value5" name="value5" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

Try something like this:
$(document).ready(function() {
$("div#example id^='value'").change(function() {
var value = 0;
$("div#example input[name!=total]").each(function() {
var i = parseInt($(this).val());
if (!isNaN(i))
{
value += i;
}
});
$('#total').val(value);
});
})

use += parseInt($(this).val());

var sum = 0;
$('input[id^=value]').each (function(){ sum+=$(this).val(); });
$('#total').val( sum );
:]

I think this might be closer:
<script type="text/javascript">
$(document).ready(function() {
$("#example value").change(function() {
var total = 0;
$("#example value").each(function() {
total += parseInt($(this).val());
});
window.console && console.log("value after each: " + total);
});
})
</script>
<div id="example">
<input type="text" size="5" class="value" name="value1" />
<input type="text" size="5" class="value" name="value2" />
<input type="text" size="5" class="value" name="value3" />
<input type="text" size="5" class="value" name="value4" />
<input type="text" size="5" class="value" name="value5" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
</div>
Your original selector for $.change() was including the total box, which I suspect you don't want.
Am I correct in guessing you want to add numbers? Your original 'value' variable was a string.
And BTW, it's safer to use the 'window.console && console.log' idiom, since there won't be a console variable for many users. (Though I bet that line was only there for debugging.)
EDIT
Added parseInt() based on other suggestions.

Use the jQuery form serialization:
alert($("form_id").serialize());
There is also a comparison for different serialization types: http://jquery.malsup.com/form/comp/