Cart - Invoice Quantity and Total Update
HTML
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col">Code</th><th scope="col">Name</th><th scope="col">Available Qty</th><th scope="col">Price</th><th scope="col">Qty</th><th scope="col">Net Price</th>
</tr><tr>
<td>ASD123</td><td>Product 1</td><td class="avlQty">10</td><td class="price">12.50</td><td>
<input name="GridView1$ctl02$TextBoxQty" type="text" value="1" maxlength="5" id="GridView1_TextBoxQty_0" class="txtQty" style="width:45px;" />
<span id="GridView1_RequiredFieldValidator1_0" style="color:Red;display:none;">*</span>
</td><td>
<span class="totalPrice"></span>
</td>
</tr><tr>
<td>BBB123</td><td>Product 2</td><td class="avlQty">12</td><td class="price">15.00</td><td>
<input name="GridView1$ctl03$TextBoxQty" type="text" value="1" maxlength="5" id="GridView1_TextBoxQty_1" class="txtQty" style="width:45px;" />
<span id="GridView1_RequiredFieldValidator1_1" style="color:Red;display:none;">*</span>
</td><td>
<span class="totalPrice"></span>
</td>
</tr><tr>
<td>CCC123</td><td>Product 3</td><td class="avlQty">15</td><td class="price">20.00</td><td>
<input name="GridView1$ctl04$TextBoxQty" type="text" value="1" maxlength="5" id="GridView1_TextBoxQty_2" class="txtQty" style="width:45px;" />
<span id="GridView1_RequiredFieldValidator1_2" style="color:Red;display:none;">*</span>
</td><td>
<span class="totalPrice"></span>
</td>
</tr><tr>
<td>DDD123</td><td>Product 4</td><td class="avlQty">20</td><td class="price">37.50</td><td>
<input...
CSS
table tr td
{
padding:5px 3px;
}
table tr td input
{
border:solid 1px gray;
}
JavaScript
//Demo by Brij Mohan (http://techbrij.com)
//Qty Validation and Total Calculation in Gridview Shopping Cart with jQuery
$(function () {
//Change price and grand total on changing qty
$('#GridView1 .txtQty').blur(function () {
var $tr = $(this).parents('tr');
if ($tr.length > 0) {
if (parseInt($tr.find('.avlQty').html()) < $(this).val()) {
alert('Qty must not exceed available quantity.');
var $ctrl = $(this);
window.setTimeout(function () {
$ctrl.focus();
}, 50);
return false;
}
$tr.find('.totalPrice').html(parseFloat($tr.find('.price').html()) * parseInt($(this).val()));
}
CalculateGrandTotal();
});
//To get grand Total
function CalculateGrandTotal() {
var grandTotal = 0.0;
$('#GridView1 tr:gt(0)').each(function () {
grandTotal = grandTotal + parseFloat($(this).find('.totalPrice').length == 0 || !$(this).find('.totalPrice').html() ? 0 : $(this).find('.totalPrice').html());
});
$('#GridView1 .grandtotal').html(grandTotal);
}
//First Time to display all total amount and grand total
function initGrid() {
$('#GridView1 tr:gt(0)').each(function () {
$(this).find('.totalPrice').html(parseFloat($(this).find('.price').html()) * parseInt($(this).find('.txtQty').val()));
});
CalculateGrandTotal();
}
//To allow numeric character only
$('#GridView1 .txtQty').keydown(function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 ||...