locked
auto calculation with multiply operation provide result without clicking on other side in window? RRS feed

  • Question

  • User-1026236167 posted

    hello i have a auto calculation code using jquery i need multiply operation all working well but 

     when put some value in textbox 1 and textbox 2  then click on some other side in window then they provide result 

    my requirement is when provide some value in textbox 1 and textbox 2 they automatic provide result without clicking on some side in window 

    aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="Store.WebForm8" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <%-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--%>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>

    <script>
    $(document).ready(function () {
    $("#txt1, #txt2").change(function () {
    $("#txt3").val($("#txt1").val() * $("#txt2").val());
    });
    });
    </script>
    <input type="text" id="txt1" />
    <input type="text" id="txt2" />
    <input type="text" id="txt3" />


    </div>
    </form>
    </body>
    </html>

    Tuesday, September 1, 2020 5:45 AM

Answers

  • User-939850651 posted

    Hi prabhjot1313,

    According to your description, I think this is easy to implement, try to use the jQuery keyup() function.

    Just like this:

    <head runat="server">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <title></title>
        <script>
            $(document).ready(function () {
                $("#txt1, #txt2").keyup(function () {
                    $("#txt3").val($("#txt1").val() * $("#txt2").val());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input type="text" id="txt1" />
                <input type="text" id="txt2" />
                <input type="text" id="txt3" />
            </div>
        </form>
    </body>

    Result:

    As you can see, after I input the data, the result will be calculated automatically in the third input box without clicking anywhere else on the page.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 1, 2020 9:29 AM