<html>
<head>
<title>Sum total onblur using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color: #174C68;
}
.txt {
font-weight: bold;
text-align: right;
}
</style>
</head>
<body>
<form id="CustomerInvoiceItems" name="CustomerInvoiceItems" action="CustomerInvoiceItems.asp" method="post">
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td>amount 1</td>
<td><input id="txt" type="text" name="txtQuoteQty" onblur="calculateSum();" value="0"/></td>
</tr>
<tr>
<td>amount 2</td>
<td><input id="txtQuoteQty" type="text" name="txtQuoteQty" onblur="calculateSum();" value="0" /></td>
</tr>
<tr>
<td>amount 3</td>
<td><input id="txtQuoteQty" type="text" name="txtQuoteQty" onblur="calculateSum();" value="0" /></td>
</tr>
<tr>
<td>amount 4</td>
<td><input id="txtQuoteQty" type="text" name="txtQuoteQty" onblur="calculateSum();" value="0" /></td>
</tr>
<tr>
<td>amount 5</td>
<td><input id="txtQuoteQty" type="text" name="txtQuoteQty" onblur="calculateSum();" value="0" /></td>
</tr>
<tr>
<td>amount 6</td>
<td><input id="txtQuoteQty" type="text" name="txtQuoteQty" onblur="calculateSum();" value="0" /></td>
</tr>
<tr id="summation">
<td align="right">Sum :</td>
<td align="center"><input id="txtTotalPrice" type="text" name="txtTotalPrice" value="0" /></td>
</tr>
</table>
</form>
<script>
function calculateSum() {
var quantity = document.CustomerInvoiceItems.txtQuoteQty.length;
var thisTotal=0;
if (quantity > 0) {
for (var i = 0; i < quantity; i++) {
thisQty = document.CustomerInvoiceItems.txtQuoteQty[i].value;
thisTotal = parseFloat(thisTotal) + parseFloat(thisQty);
}
} else {
thisQty = document.CustomerInvoiceItems.txtQuoteQty.value;
thisTotal = parseFloat(thisTotal) + parseFloat(thisQty);
}
document.CustomerInvoiceItems.txtTotalPrice.value = thisTotal;
}
</script>
</body>
</html>