Description:
Welcome to Jqueryjohn.com.
One of my readers asked me one question that how to sum of
all textbox values while user typing on client side. So I decided to write post
for this.
Whenever user
change the value of the textbox, sum of the textbox values are calculated and
displayed on other textbox.
For live demo, click here.
Example program:
<html>
<head>
<title>Sum Textbox Values using JQuery</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('.addValue').each(function () {
$(this).keyup(function () {
SumValues();
});
});
});
function
SumValues() {
var
sum = 0;
$('.addValue').each(function () {
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");
}
});
$('#totalValue').val(sum);
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<table>
<tr>
<td>
Value 1 :
</td>
<td>
<input id="Text1" type="text" class="addValue" />
</td>
</tr>
<tr>
<td>
Value 2 :
</td>
<td>
<input id="Text2" type="text" class="addValue" />
</td>
</tr>
<tr>
<td>
Sum Value:
</td>
<td>
<input id="totalValue" type="text" disabled="disabled" />
</td>
</tr>
</table>
</form>
</body>
</html>
Display sum of
all textbox values to another textbox using JQuery, sum of all textbox values
while typing, sum values in textbox while typing
0 comments:
Post a Comment