Follow by Email

Thursday, April 11, 2013

Dynamically do arithmetic operations in Javascript


Here i will add two number entered in two textbox's and display it in other textbox.

You can use html textbox or asp.net textbox

1. Add Three Textbox. In our thirdtextbox we will show the result.

2. Below is the sample code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function ShowResult() {
            var Val1 = parseFloat(document.getElementById("TextBox1").value);
            var Val2 = parseFloat(document.getElementById("TextBox2").value);
            document.getElementById("TextBox3").value = Val1 + Val2;


        }    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" onchange="ShowResult()"></asp:TextBox>
       

            <br /><br /> 
        Result : <asp:TextBox ID="TextBox3" Enabled="false" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>


3. On textchange in any of the first two texboxes we will call the javascript function ShowResult() this will show the desired result.

Hence we will add onchange="ShowResult()" property in both the textbox's.

4. Now run and check the final output: