Here is the solution to populate the Totals textbox..
---------------------------------------------------------------------
<!--- Sum up the Regular row whenever employee modifies the time value(s) --->
<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);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
---------------------------------------------------------------------- -
And the HTML on my page:
---------------------------------
<td><input type="text" class="txt" pattern="[0-9]*" name="mon1" id="mon1" value="8" size="7" maxlength="5" data-mini="true"></td>
<td><input type="text" class="txt" pattern="[0-9]*" name="tue1" id="tue1" value="8" size="7" maxlength="5" data-mini="true"></td>
<td><input type="text" class="txt" pattern="[0-9]*" name="wed1" id="wed1" value="8" size="7" maxlength="5" data-mini="true"></td>
<td><input type="text" class="txt" pattern="[0-9]*" name="thu1" id="thu1" value="" size="7" maxlength="5" data-mini="true"></td>
<td><input type="text" class="txt" pattern="[0-9]*" name="fri1" id="fri1" value="" size="7" maxlength="5" data-mini="true"></td>
<td><input type="text" class="txt" pattern="[0-9]*" name="sat1" id="sat1" value="" size="7" maxlength="5" data-mini="true"></td>
<td><input type="text" class="txt" pattern="[0-9]*" name="sun1" id="sun1" value="" size="7" maxlength="5" data-mini="true"></td>
<td id="summation"><input name="total1" type="text" class="txtT" disabled id="sum" value="" size="10" maxlength="5" data-mini="true"></td>