How to display a text of textbox in a label in real time?

techques
techques used Ask the Experts™
on
I use ASP.NET and C#

There is a asp:textbox and a asp:label

When I input 15092009 in textbox, it needs to show $15,092,009.00 in real time.

How can I do it?

use javascript or ASPX?

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
You should use AJAX. Put your textbox and label inside an ajax UpdatePanel control. Then, OnTextChanged of the textbox, you can update your label, and format the value to a currency like this:

decimal myValue = txtMyTextbox.Text;
lblMyLable.Text = decimal.ToString("{0:c}");

You have to put it into a decimal variable first before you can format it to currency.

Author

Commented:
I have no experience using ajax, can you show me the full code in aspx?

Commented:
Sure, this would be the aspx file:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:TextBox ID="myTextBox" runat="server" OnTextChanged="myTextBox_OnTextChanged"></asp:TextBox><br/>
            <asp:Label ID="lblMyLabel" runat="server"></asp:Label>
        </asp:UpdatePanel>    
    </div>
    </form>
</body>
</html

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

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!

Commented:
And this would be the aspx.cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    protected void myTextBox_OnTextChanged(object, sender, EventArgs e)
    {
        decimal myValue = txtMyTextbox.Text;
        lblMyLabel.Text = decimal.ToString("{0:c}");
    }
}

Open in new window

Commented:
Sorry, please use this aspx code instead. I forgot to include a script manager control which is needed for ajax.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:TextBox ID="myTextBox" runat="server" OnTextChanged="myTextBox_OnTextChanged"></asp:TextBox><br/>
            <asp:Label ID="lblMyLabel" runat="server"></asp:Label>
        </asp:UpdatePanel>    
    </div>
    </form>
</body>
</html

Open in new window

You should DEFINATELY use javascript, not aspx.  
You'll have to do a bit more manual work to format as currency, but for something this basic, there's no reason to have the extra processing / time / postback that AJAX would cause.

Commented:
Ajax is javascript.... and if you're developing in asp.net then its the easiest option to rather use the built in ajax controls as opposed to manually coding something like that.
i am aware that ajax is javascript, but it uses js to post back to the server and back to the page.
though its easier to do it that way, its far less efficient.  the js (non-ajax) for something like that would not be too complicated, and would give much better performance.

Author

Commented:
Hi

It has Parser error and cannot compile:
Unknown server tag 'asp:ScriptManager'

And, there is no UpdatePanel.

protected void myTextBox_OnTextChanged(object sender, EventArgs e)
{
            decimal myValue = myTextBox.Text;  
            lblMyLabel.Text = myValue.ToString("{0:c}");  //should it be myValue but not decimal.ToString?
}

I found there is a AjaxControlToolkit.dll in bin folder. Do I need to add any reference in the project? as it cannot recognize ScriptManager and UpdatePanel.

Also, why it needs using System.Linq; ?



Commented:
Oh i see.. then how about some code for us to use?
not a problem, in the office in a few minutes, will post js then
Try this out:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebTest.WebForm6" %>
<!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 type="text/javascript">
        function changeLabel(text) {
            var myLabel = document.getElementById('<%= myLabel.ClientID %>');
            myLabel.innerHTML = formatCurrency(text);
        }
        function formatCurrency(num) {
            num = num.toString().replace(/\\$|\\,/g, '');
            if (isNaN(num)) num = '0';
            sign = (num == (num = Math.abs(num)));
            num = Math.floor(num * 100 + 0.50000000001);
            cents = num % 100;
            num = Math.floor(num / 100).toString();
            if (cents < 10) cents = '0' + cents;
 
            for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
                num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
 
            return (((sign) ? '' : '-') + '$' + num + '.' + cents);
        }
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:TextBox ID="myTextBox" runat="server" onkeyup="changeLabel(this.value);"></asp:TextBox>
        <asp:Label ID="myLabel" runat="server"></asp:Label>
    
    </div>
    </form>
</body>
</html>

Open in new window

Author

Commented:
Thanks for both help. excellent solution. I add more points.

Author

Commented:
Snarf0001 has provided an excellent js solution, thanks for great help.

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