I have the following jQuery code for finding the sum of all table rows, now it finds the sum on keyup. I want the sum to be already calculated. I wanted to have a hidden field like an input with a value, so the sum is automatically calculated.
Now there is an input, the user writes some number and than he gets the sum, I am trying to get the sum automatically. it's work but I need the output print in text box.... for this code
<table>
<tr>
<td width="40px">1</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>2</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>3</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr id="summation">
<td colspan ="2" align="right">
Sum :
</td>
<td>
<span id="sum"><input class="txt" type="text" name="txt" />
</td>
</span>
</td>
</tr>
</table>
$(document).ready(function() {
//this calculates values automatically
calculateSum();
$(".txt").live("keydown keyup", function() {
calculateSum();
});
});
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);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0){
$(this).css("background-color", "red");
}
});
$("#sum").html(sum.toFixed(2));
}
Use val() to set the value in the textbox like this:
$("#sum input").val(sum.toFixed(2));
Html:
<table>
<tr>
<td width="40px">1</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>2</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr>
<td>3</td>
<td>Number</td>
<td><input class="txt" type="text" name="txt" /></td>
</tr>
<tr id="summation">
<td colspan ="2" align="right">
Sum :
</td>
<td>
<input type="text" id='sum1' name="input" />
</td>
</span>
</td>
</tr>
</table>
Jquery:
$(document).ready(function() {
//this calculates values automatically
calculateSum();
$(".txt").on("keydown keyup", function() {
calculateSum();
});
});
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);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0){
$(this).css("background-color", "red");
}
});
$("input#sum1").val(sum.toFixed(2));
}
Here is working Fiddle DEMO
You can use .val() here:
$("#sum input").val(sum.toFixed(2));
instead of:
$("#sum").html(sum.toFixed(2));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With