Calculation in javascript

Question

1.00/5 (2 votes)

See more:

Hi,

I want the calculation in javascript.

Below is my code in .net

What I have tried:

HTML

<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>

VB.NET

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        TextBox3.Text = TextBox1.Text * TextBox2.Text / 100
    End Sub

C#

i want above code behind code in javascript.
 
Thanks
Basit.

Posted 5-Dec-16 6:09am

basitsar

Updated 7-Dec-16 0:55am

Add a Solution

3 solutions

Solution 3

----Code Behind------

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
TextBox3.Text = TextBox1.Text * TextBox2.Text / 100
End Sub

--Code in JQuery------

$("#Button").click(function(){
var val1,val2,val3;
val1=Parse.Float($("#Textbox1").val());
val2=Parse.Float($("#Textbox2").val());
val3=val1*val2/100;
$("#TextBox3").val(val3);
});

Posted 7-Dec-16 0:55am

Hrishikesh

Solution 2

Below is the solution of above, I tried with below code.

Thanks for your help.

HTML

<html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 128px;
        }
    </style>
<script>
    function calculate() {
        var myBox1 = document.getElementById('box1').value;
        var myBox2 = document.getElementById('box2').value;
        var result = document.getElementById('result');
        var myResult = myBox1 * myBox2 / 100;
        result.value = myResult;


    }

</script>
</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="box1" runat="server" oninput="calculate()" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label2" runat="server" Text="Discount Percent"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="box2" runat="server" oninput="calculate()" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label3" runat="server" Text="Toatl % Amount"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="result" 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>

Posted 5-Dec-16 21:05pm

basitsar

Comments

F-ES Sitecore 6-Dec-16 5:08am

That code won't work if the text boxes are inside a container, or if you start to use master pages. You should use ClientID as suggested in the other solution and that ensures your code will work wherever the text boxes are.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Accepted Answer · 2016-12-05T06:19:00

You can put this script-tag to your head:

ASP.NET

<script>
window.addEventListener("load", function() {
    document.getElementById("<%= Button1.ClientID %>").addEventListener("click", function() {
        var textbox1value = parseFloat(document.getElementById("<%= TextBox1.ClientID %>").value);
        var textbox2value = parseFloat(document.getElementById("<%= TextBox2.ClientID %>").value);
        document.getElementById("<%= TextBox3.ClientID %>").value = (textbox1value * textbox2value / 100).toString();
    });
});
</script>

The "load" event listener makes sure that the function (passed as second argument) gets called when the page is loaded. The <%= Button1.ClientID %> evaluations (and the similar ones later) make sure that the script in the HTML response contains the correct IDs for the elements on the client side (their client-side ID is not necessarily their server-side ID). Then the "click" handler executes a function when the button is clicked, parseFloat converts the textbox values to floating-point numbers and then your operation is performed on these values and the result is put in TextBox3.