Last post Sep 01, 2020 09:29 AM by XuDong Peng
Member
48 Points
144 Posts
Sep 01, 2020 05:45 AM|prabhjot1313|LINK
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>
Participant
1050 Points
327 Posts
Sep 01, 2020 09:29 AM|XuDong Peng|LINK
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
Member
48 Points
144 Posts
auto calculation with multiply operation provide result without clicking on other side in window?
Sep 01, 2020 05:45 AM|prabhjot1313|LINK
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>
Participant
1050 Points
327 Posts
Re: auto calculation with multiply operation provide result without clicking on other side in win...
Sep 01, 2020 09:29 AM|XuDong Peng|LINK
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