Calculate value of 2 textfield and display in 3rd textfield using javascript

tia_kamakshi
tia_kamakshi used Ask the Experts™
on
Hi,

I am working on Web application using ASP.net 3.5 using C#

I wanted to calculate 2 fields and display the calculated value in 3rd text field at client side using javascript

I have 2 text field

<asp:TextField id="txtPrice" runat="server" />
<asp:TextField id="txtQuantity" runat="server" />

I wanted values entered in both text fields should be multiplied and automatically displayed in textfield

<asp:TextField id="txtTotal" runat="server" />

value should be a*b=c

How do we do this at client side using javascript

Please guide
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<asp:TextField id="txtPrice" runat="server" onblur="displayTotal();" />
<asp:TextField id="txtQuantity" runat="server" onblur="displayTotal();" />

and write the function is <script> block as:

function displayTotal()
{
  var price = document.getElementById("txtPrice").value;
  var qty = document.getElementById("txtQuantity").value;
  var total = price * qty;
  document.getElementById("txtTotal").value = total;
}

}
leakim971Multitechnician
Top Expert 2014

Commented:
with formating an to accept only decimal and the dot char
<script language="javascript" type="text/javascript">
    function total() {
        debugger;
        var txtPrice = document.getElementById("<%= txtPrice.ClientID %>");
        var txtQuantity = document.getElementById("<%= txtQuantity.ClientID %>");
        var txtTotal = document.getElementById("<%= txtTotal.ClientID %>");
        txtPrice.value = txtPrice.value.replace(/[^\d.]/g, "");
        txtQuantity.value = txtQuantity.value.replace(/[^\d.]/g, "");
        txtTotal.value = ((isNaN(parseFloat(txtPrice.value)) ? 0 : parseFloat(txtPrice.value)) * (isNaN(parseFloat(txtQuantity.value)) ? 0 : parseFloat(txtQuantity.value))).toFixed(2);
    }
</script>
<asp:TextBox id="txtPrice" runat="server" onkeyup="total();" />
<asp:TextBox id="txtQuantity" runat="server" onkeyup="total();" />
<asp:TextBox id="txtTotal" runat="server" ReadOnly="true" />

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
Test page :


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script language="javascript" type="text/javascript">
    function total() {
        var txtPrice = document.getElementById("<%= txtPrice.ClientID %>");
        var txtQuantity = document.getElementById("<%= txtQuantity.ClientID %>");
        var txtTotal = document.getElementById("<%= txtTotal.ClientID %>");
        txtPrice.value = txtPrice.value.replace(/[^\d.]/g, "");
        txtQuantity.value = txtQuantity.value.replace(/[^\d.]/g, "");
        txtTotal.value = ((isNaN(parseFloat(txtPrice.value)) ? 0 : parseFloat(txtPrice.value)) * (isNaN(parseFloat(txtQuantity.value)) ? 0 : parseFloat(txtQuantity.value))).toFixed(2);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
        Price : <asp:TextBox id="txtPrice" runat="server" onkeyup="total();" /><br />
        Quantity :<asp:TextBox id="txtQuantity" runat="server" onkeyup="total();" /><br />
        Total :<asp:TextBox id="txtTotal" runat="server" ReadOnly="true" />
    </form>
</body>
</html>

Open in new window

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

if you are using master pages or panel's etc, try the following code also:
function displayTotal()
{
  var price = document.getElementById("<%=txtPrice.ClientID%>").value;
  var qty = document.getElementById("<%=txtQuantity.ClientID%>").value;
  var total = price * qty;
  document.getElementById("txtTotal").value = total;
}

Open in new window

Author

Commented:
Many thanks all for your great help

Can you please guide me what below code is doing

txtPrice.value = txtPrice.value.replace(/[^\d.]/g, "");
txtQuantity.value = txtQuantity.value.replace(/[^\d.]/g, "");

Thanks again

Kind Regards
leakim971Multitechnician
Top Expert 2014
Commented:
>Can you please guide me what below code is doing

We remove all non decimal or dot character with a regular expression : /[^\d.]/g
And we save it back to the field/control.

http://www.w3schools.com/jsref/jsref_obj_regexp.asp
leakim971Multitechnician
Top Expert 2014

Commented:
Thanks for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial