TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Prasanta Baidya
NA
44
4.8k
Calculation in text box
Feb 8 2013 7:07 AM
I want to minus two value live in the page on the basis of the following jquery, I have sum code it is work properly. Please help.
my code is:
<table width="300px" border="1" style="border-collapse: collapse; background-color: #E8DCFF">
<tr>
<td width="40px">
1
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Number
</td>
<td>
<input class="txt" type="text" name="txt" runat="server" />
</td>
</tr>
<tr id="summation">
<td>
</td>
<td align="right">
Sum :
</td>
<td align="center">
<span id="sum">0</span>
</td>
</tr>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$(this).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));
}
</script>
Reply
Answers (
1
)
Confirm form resubmission on browser back button
faq page