Hello forum,
Please how do I get to add all the amount in the column and give a total in a textbox, as shown in the picture below? There is also a Value Added Tax (VAT) in percentage that will be included. For the grand total to be achieved. Although the Amount is empty in the picture, because I don’t know how to do it. Please I seek assistance on this. Thank you
Here is my HTML Mark up and the javascript I used to multiply the Quantity and the Rate and give Amount outcome.
Javascript
<script type="text/javascript">
$(document).on("change keyup", "[id*=TextBox2],[id*=TextBox3]", function () {
var row = $(this).closest("tr");
var quantity = parseFloat($.trim($(row).find($('[id*=TextBox2]')).val()));
var rate = parseFloat($.trim($(row).find($('[id*=TextBox3]')).val()));
if (isNaN(quantity)) {
quantity = 0;
}
if (isNaN(rate)) {
rate = 0;
}
$(row).find($('[id*=TextBox2]')).val(quantity);
$(row).find($('[id*=TextBox3]')).val(rate);
$(row).find($('[id*=Label1]')).html(parseFloat(rate) * parseFloat(quantity));
});
</script>
HTML Markup
<div class="parent">
<div class="child" id="midcont" style="width: 100%;">
<div class="heading">
<asp:Label ID="Label4" runat="server" Text="COMPANY"></asp:Label>
</div>
<div>
<br />
<header>
<div class="company-address">
<asp:Label ID="Label2" runat="server" Text="Company Name:"></asp:Label>
<asp:TextBox ID="TextBox4" runat="server" Height="60px" TextMode="MultiLine" Width="265px"></asp:TextBox>
</div>
<div class="invoice-details">
<asp:Label ID="Labelinvoice" runat="server" Text="Invoice N°: 6541"></asp:Label><br />
<br />
<asp:TextBox ID="TextBox5" runat="server" Width="198px" type="date" BorderStyle="Solid" BorderWidth="1"></asp:TextBox>
</div>
<div class="customer-address">
<asp:Label ID="Label3" runat="server" Text="TO:"></asp:Label>
<asp:TextBox ID="TextBox6" runat="server" Height="60px" TextMode="MultiLine" Width="265px"></asp:TextBox>
</div>
</header>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<asp:GridView ID="Gridview1" runat="server" Font-Size="x-Small" ShowFooter="True" AutoGenerateColumns="False" OnRowCreated="Gridview1_RowCreated"
class="table table-striped table-condensed table-bordered" HeaderStyle-ForeColor="White" Height="50px" HeaderStyle-Height="10px" HeaderStyle-BackColor="Black">
<Columns>
<asp:TemplateField HeaderText="Item Decription" ItemStyle-Width="450">
<ItemTemplate>
<asp:TextBox ID="textBox1" runat="server" Width="450" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
<script type="text/javascript">
function Resize(textbox) {
textbox.style.height = "";
textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
}
</script>
</ItemTemplate>
<FooterStyle HorizontalAlign="Left" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" BackColor="SteelBlue" Font-Size="Small" Text="+ Item" OnClick="ButtonAdd_Click" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity" ItemStyle-Width="100">
<ItemTemplate>
<asp:TextBox Class="form-control" ID="TextBox2" Height="25" Font-Size="Small" runat="server" Width="100"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Rate" ItemStyle-Width="180">
<ItemTemplate>
<span class="currency-symbol" style="font-weight: bolder">NGN</span>
<asp:TextBox ID="TextBox3" Height="25" runat="server" Width="120"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount" ItemStyle-Width="150">
<ItemTemplate>
<span class="currency-symbol" style="font-weight: bolder">NGN</span>
<asp:Label ID="Label1" runat="server" Text="0" Font-Bold="True"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Remove</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle Height="10px" />
</asp:GridView>
<div class="total">
<asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT:"></asp:Label>
<asp:TextBox ID="TextBox7" runat="server" CssClass="form-control" placeholder="(%)"></asp:TextBox>
<asp:Label ID="Label6" runat="server" Font-Bold="true" Text="Total NGN:"></asp:Label>
<asp:TextBox ID="TextBox8" runat="server" CssClass="form-control" placeholder="Amount" ></asp:TextBox>
</div>
<br /><br />
</div
