Calculate TexBox value using JavaScript

Last Reply on Dec 06, 2016 09:01 AM By basit0079

Posted on Dec 06, 2016 01:50 AM

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 128px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:Label ID="Label1" runat="server" Text="Total Amount"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label2" runat="server" Text="Discount Percent"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label3" runat="server" Text="Toatl % Amount"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Calculate" />
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

 

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        TextBox3.Text = TextBox1.Text * TextBox2.Text / 100
    End Sub
i want above code behind code in javascript.
 
Thanks
Basit. 
Posted on Dec 06, 2016 01:59 AM

Hi basit0079,

 I have created a sample which full your requirement

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=Button1]').click(function () {
                var textBox1 = $('[id*=TextBox1]').val();
                var textBox2 = $('[id*=TextBox2]').val();
                var textBox3 = textBox1 * textBox2 / 100;
                $('[id*=TextBox3]').val(textBox3);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <span id="Label1">Total Amount</span>
                </td>
                <td>
                    <input name="TextBox1" type="text" id="TextBox1" />
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Label2">Discount Percent</span>
                </td>
                <td>
                    <input name="TextBox2" type="text" id="TextBox2" />
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Label3">Toatl % Amount</span>
                </td>
                <td>
                    <input name="TextBox3" type="text" id="TextBox3" />
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <input type="submit" name="Button1" value="Calculate" id="Button1" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Demo


Posted on Dec 06, 2016 09:01 AM

Many Many Thanks