Calculate Row Total and Grand Total in gridview using jquery

Question

Hi in below JavaScript code the multiplication is between txtQuantity which is textbox TemplateField in grid view and price which is BoundField in grid view.

My issue is my grid view have both txtQuantity and txtPrice as TemplateFieldes

<ItemTemplate><asp:TextBox ID="txtprice" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox></ItemTemplate>

<ItemTemplate><asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox></ItemTemplate>

i have tried to modify the java-script code

 $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtprice]", row).html()) * parseFloat($(this).val()));

but it give me NaN as result of multiplication

Original js code

 <script type="text/javascript"> $(function () { $("[id*=txtQuantity]").val("0"); }); $("[id*=txtQuantity]").live("change", function () { if (isNaN(parseInt($(this).val()))) { $(this).val('0'); } else { $(this).val(parseInt($(this).val()).toString()); } }); $("[id*=txtQuantity]").live("keyup", function () { if (!jQuery.trim($(this).val()) == '') { if (!isNaN(parseFloat($(this).val()))) { var row = $(this).closest("tr"); $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val())); } } else { $(this).val(''); } var grandTotal = 0; $("[id*=lblTotal]").each(function () { grandTotal = grandTotal + parseFloat($(this).html()); }); $("[id*=lblGrandTotal]").html(grandTotal.toString()); }); </script> 

Answer 1

There are some minor issues with your code, try this:

 $(function () { $("[id*=txtQuantity").val("0"); }); $(document).on("change", "[id*=txtQuantity]", function () { if (isNaN(parseInt($(this).val()))) { $(this).val('0'); } else { $(this).val(parseInt($(this).val()).toString()); } }); $(document).on("keyup mouseup", "[id*=txtQuantity]", function () { if (!jQuery.trim($(this).val()) == '') { if (!isNaN(parseFloat($(this).val()))) { var row = $(this).closest("tr"); $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtPrice]", row).val()) * parseFloat($(this).val())); } } else { $(this).val(''); } var grandTotal = 0; $("[id*=lblTotal]").each(function () { var value = $(this).html(); if(value != "") grandTotal = grandTotal + parseFloat(value); }); $("[id*=lblGrandTotal]").html(grandTotal.toString()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="5"> <tr> <td><input type="text" id="txtPrice1" value="100" /></td> <td><input type="text" id="txtQuantity1" value="1" /></td> <td><div id="lblTotal1" /></td> </tr> <tr> <td><input type="text" id="txtPrice2" value="200" /></td> <td><input type="text" id="txtQuantity2" value="2" /></td> <td><div id="lblTotal1" /></td> </tr> <tr> <td><input type="text" id="txtPrice3" value="300" /></td> <td><input type="text" id="txtQuantity3" value="3" /></td> <td><div id="lblTotal1" /></td> </tr> </table> <div id="lblGrandTotal" />