//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 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || // Allow: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Allow: home, end, left, right (event.keyCode >= 35 && event.keyCode <= 39)) { // let it happen, don't do anything return; } else { // Ensure that it is a number and stop the keypress if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { event.preventDefault(); } } }); initGrid(); })
<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 name="GridView1$ctl05$TextBoxQty" type="text" value="1" maxlength="5" id="GridView1_TextBoxQty_3" class="txtQty" style="width:45px;" /> <span id="GridView1_RequiredFieldValidator1_3" style="color:Red;display:none;">*</span> </td><td> <span class="totalPrice"></span> </td> </tr><tr> <td>EEE123</td><td>Product 5</td><td class="avlQty">21</td><td class="price">25.00</td><td> <input name="GridView1$ctl06$TextBoxQty" type="text" value="1" maxlength="5" id="GridView1_TextBoxQty_4" class="txtQty" style="width:45px;" /> <span id="GridView1_RequiredFieldValidator1_4" style="color:Red;display:none;">*</span> </td><td> <span class="totalPrice"></span> </td> </tr><tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> Total: <span class="grandtotal"></span> </td> </tr> </table>
table tr td { padding:5px 3px; } table tr td input { border:solid 1px gray; }