Calculate TextBox total using jQuery in ASP.Net

Last Reply one month ago By pandeyism

Posted one month ago

I want All table textbox total generated automatically in another (last) textbox of the table

 

You are viewing reply posted by: pandeyism one month ago.
Posted one month ago Modified on one month ago

Hi VinitaAkha,

Refer below code for total. you need to write code in jquery otherwise make textchange event for all textbox and calculate it.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var value = 0
            $('input[type=text]').change(function () {
                value = parseInt(value) + parseInt($(this).val());
                $('#TextBox34').val(value);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="container" style="width: auto; font-size: 25px; background-color: gainsboro">
            <div class="form-part">
                <h2 style="background-color: darkcyan; width: auto; height: 100px; font-size: 40px;
                    text-align: center; padding-top: 30px; border: double; color: white">
                    <b>Add Monthly Cost</b></h2>
                <h4 style="font-size: 35px">
                    A)Fixed Capital:</h4>
                <table border="1" id="tbldynamic" runat="server">
                    <tr style="background-color: darksalmon">
                        <td>
                            <h1 style="font-size: 30px; text-align: center;">
                                (i)Land & Building:
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label3" runat="server" Text="1)Land" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox3" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <br />
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="2)Built Up Area(Cost of construction)"
                                Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox1" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label2" runat="server" Text="Total Land:-" ForeColor="#ff0000" Font-Bold="true"
                                Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox2" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <br />
                <table border="1">
                    <tr style="background-color: darksalmon">
                        <td>
                            <h1 style="font-size: 30px; text-align: center">
                                (ii)Machinery & Equipment
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label4" runat="server" Text="1)Washing Tank" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox4" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label5" runat="server" Text="2)Pilling Machine " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox5" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label6" runat="server" Text="3)Slicing Machine" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox6" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label7" runat="server" Text="4)Frying Machine" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox7" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label8" runat="server" Text="5)flavoring Machine" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox8" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label9" runat="server" Text="6)Pouch Printing Machine" Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox9" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label10" runat="server" Text="7)Other Expenditures" Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox10" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label11" runat="server" Text="Total Machinery & Equipment:- " Font-Bold="true"
                                ForeColor="#ff0000" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox11" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="ui-corner-right">
                <h4 style="font-size: 35px">
                    B)Working Capital:</h4>
                <table border="1">
                    <tr style="background-color: darksalmon">
                        <td>
                            <h1 style="font-size: 30px; text-align: center">
                                i)Salary & Wages
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label12" runat="server" Text="1)Manager" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox12" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label13" runat="server" Text="2)Sales Supervisor" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox13" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label14" runat="server" Text="3)Computer Operator" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox14" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label15" runat="server" Text="4)Skilled Workers" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox15" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label16" runat="server" Text="5)Un-skilled Workers " Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox16" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label17" runat="server" Text="Total Salary & Wages:- " Font-Bold="true"
                                ForeColor="#ff0000" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox17" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <br />
                <table border="1" style="text-align: left">
                    <tr style="background-color: darksalmon">
                        <td>
                            <h1 style="font-size: 30px; text-align: center">
                                ii)Raw Material
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label18" runat="server" Text="1)Potatoes " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox18" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label23" runat="server" Text="2)Bananas " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox23" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label19" runat="server" Text="3)Refined Oil " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox19" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label20" runat="server" Text="4)Flavars,Chemicals Spices etc " Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox20" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label21" runat="server" Text="5)Packing Material " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox21" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label22" runat="server" Text="Total Raw Material:- " Font-Bold="true"
                                ForeColor="#ff0000" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox22" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <table border="1">
                    <tr style="background-color: darksalmon">
                        <td>
                            <h1 style="font-size: 30px; text-align: center">
                                iii)Utilities:
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label24" runat="server" Text="1)Water " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox24" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label25" runat="server" Text="2)Fuel " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox25" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label26" runat="server" Text="3)Electricity " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox26" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label27" runat="server" Text="Total Utilities:- " Font-Bold="true"
                                ForeColor="#ff0000" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox27" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <br />
                <table border="1">
                    <tr style="background-color: darksalmon">
                        <td>
                            <h1 style="font-size: 30px; text-align: center">
                                iv) Other Contingent Expenses:
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label28" runat="server" Text=" 1)Consumable Stores  " Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox28" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label29" runat="server" Text="2) Maintenance and Repairs   " Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox29" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label30" runat="server" Text="3)Transportation & Travelling   " Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox30" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label31" runat="server" Text="4)Insurance " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox31" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label32" runat="server" Text=" 5) Other Expenses " Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox32" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label33" runat="server" Text=" 6)Advertisement & Publicity " Width="900px"
                                Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox33" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label34" runat="server" Text="Total Of Other Contingent Expenses :- "
                                Font-Bold="true" ForeColor="#ff0000" Width="900px" Font-Size="25px"></asp:Label>
                            <asp:TextBox ID="TextBox34" runat="server" Width="200px" Height="50px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
            <center>
                <asp:Button ID="Button1" runat="server" Text="Add Cost" CssClass="ui-button" BackColor="#ff0066"
                    ForeColor="#ffffff" Font-Size="35px" />
            </center>
        </div>
    </div>
    </form>
</body>
</html>