Click here to Skip to main content
14,641,850 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi,

I want the calculation in javascript.

Below is my code in .net

What I have tried:

<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
Updated 7-Dec-16 0:55am
Rate this:
Please Sign up or sign in to vote.

Solution 1

You can put this script-tag to your head:
<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.
   
v4
Comments
basitsar 6-Dec-16 0:10am
   
Thanks A lot. But o/p is coming NaN
Thomas Daniels 6-Dec-16 11:26am
   
Oh, my fault. I tried to convert the *element* to a float rather than its value. I fixed it.
basitsar 14-Dec-16 5:32am
   
Thanks A lot. Below code solved problem in Master.


function calculate() {
var myBox1 = document.getElementById("&lt;%= TextBox1.ClientID %>").value;
var myBox2 = document.getElementById("&lt;%= TextBox2.ClientID %>").value;
var result = document.getElementById('result');
document.getElementById("&lt;%= txtDiscount.ClientID %>").value = ((myBox1 - myBox2) / myBox1) * 100;
}

Rate this:
Please Sign up or sign in to vote.

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);
});
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

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

Thanks for your help.

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

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100