how to dynamically set the text of a label using the text from textbox?

Question

maybach_hp 0 Newbie Poster

15 Years Ago

Hello,

I am newb to c# and I am working on an example. The challenge is to dynamically set the text of the label using the textboxes' text.

- There are 3 textboxes and a label. All are asp controls.
- The text should be displayed in the label as you type in the textbox and should hold the information of that particular text box when the user goes to another textbox.
- The user enters another string in the 2nd textbox which should add up to the label.
- If the user deletes the text of a textbox that should again remove the text from the label.

Please let me know how to do this with code or an idea.

I found something on internet like label.innerHTML can do this but I am not able to do it.

Thanks in advance!

asp.net

4 Contributors
19 Replies
6K Views
3 Years Discussion Span
Latest Post 12 Years Ago Latest Post by gopaltiwari2012

DdoubleD 315 Posting Shark

15 Years Ago

Does this label1.Text need to be updated after each key stroke in the TextBox, or can it be updated after user has finished editing?

DdoubleD 315 Posting Shark

15 Years Ago

Note the attributes for the TextBox:
onblur: control losing focus
onkeyup: after each keystroke

The value "UpdateLabel();" tells it to run that script upon those events.

<head runat="server">
    <title></title>
</head>
<script type="text/javascript">
function UpdateLabel()
{
document.getElementById('Label1').innerText = document.getElementById('TextBox1').value;
}
</script>
<body>
    <form id="form1" runat="server">
    <div style="height: 83px">
			<br />
			<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
			<asp:TextBox ID="TextBox1" runat="server" onblur="UpdateLabel();" onkeyup="UpdateLabel();">
			  </asp:TextBox>
    </div>
    </form>
</body>

DdoubleD 315 Posting Shark

15 Years Ago

I thought I sent this a few minutes ago, but I guess not. Here is another way to do it in the asp form's page load and without the Java function:

protected void Page_Load(object sender, EventArgs e)
        {
            String scriptText = "";
            scriptText += "function UpdateLabel2(){";
            scriptText += "   Label1.innerText = " +
                " document.forms[0].TextBox1.value";
            scriptText += "}";
            this.ClientScript.RegisterClientScriptBlock(this.GetType(),
               "OnKeyUpScript", scriptText, true);
            TextBox1.Attributes.Add("onkeyup", "UpdateLabel2()");
            TextBox1.Attributes.Add("onblur", "UpdateLabel2()");
        }

DdoubleD 315 Posting Shark

15 Years Ago

Thankyou very much. It works like charm!
But this works with one text box. How can I do with 3 textboxes?

OK. You need to concatenate all three textboxes into the one label?

DdoubleD 315 Posting Shark

15 Years Ago

You can just modify the function to concatenate the values and call it to process keyup events for all three textboxes:

protected void Page_Load(object sender, EventArgs e)
        {
            String scriptText = "";
            scriptText += "function UpdateLabel2(){";
            scriptText += "   Label1.innerText = " +
                " document.forms[0].TextBox1.value + ',' + " + 
                " document.forms[0].TextBox2.value + ',' + " +
                " document.forms[0].TextBox3.value";
            scriptText += "}";
            this.ClientScript.RegisterClientScriptBlock(this.GetType(),
               "OnKeyUpScript", scriptText, true);
            TextBox1.Attributes.Add("onkeyup", "UpdateLabel2()");
            TextBox1.Attributes.Add("onblur", "UpdateLabel2()");
            TextBox2.Attributes.Add("onkeyup", "UpdateLabel2()");
            TextBox2.Attributes.Add("onblur", "UpdateLabel2()");
            TextBox3.Attributes.Add("onkeyup", "UpdateLabel2()");
            TextBox3.Attributes.Add("onblur", "UpdateLabel2()");
        }

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

maybach_hp 0 Newbie Poster · Answer 1 · 2009-08-20T21:44:24+00:00

It has to be updated for each key stroke. Like we type in the textbox and the letters start appearing in the label.

Thanks!

maybach_hp 0 Newbie Poster · Answer 2 · 2009-08-20T23:36:30+00:00

Thankyou very much. It works like charm!
But this works with one text box. How can I do with 3 textboxes?

maybach_hp 0 Newbie Poster · Answer 3 · 2009-08-20T23:58:19+00:00

Yes that's right. I have to concatenate the text from textboxes.

Like textbox1.text <space or symbol> textbox2.text and so on...

maybach_hp 0 Newbie Poster · Answer 4 · 2009-08-21T00:58:27+00:00

Brilliant! I was actually working like that. But now the problem is when the user deletes the text in the textbox the ',' should also go right?

How to remove that?

maybach_hp 0 Newbie Poster · Answer 5 · 2009-08-21T01:11:09+00:00

Brilliant! I was actually working like that. But now the problem is when the user deletes the text in the textbox the ',' should also go right?
How to remove that?

I was thinking of replacing the symbol in the script itself.
If textbox1.text not null then display in the label.
Same goes to textbox2.text but with the symbol. Now when textbox2.text is cleared then remove symbol. Right?

DdoubleD 315 Posting Shark · Answer 6 · 2009-08-21T01:12:45+00:00

Brilliant! I was actually working like that. But now the problem is when the user deletes the text in the textbox the ',' should also go right?
How to remove that?

Well, now that's a good question. I haven't programmed in ASP.NET, VB or Java script. That function I wrote (UpdateLabel2) isn't exactly C# code, and it took me a while to figure that out. Do you know VB or Java script?

I think a good way to handle it would be to create another script function that accepts a string, then returns another string, with or without the comma (or other delimiter), depending on whether the passed in string is blank (empty). You could then substitute this new function call in place of each of the three textbox (and comma literal) references in the concatentation within the UpdateLabel2() function.

Make sense?

DdoubleD 315 Posting Shark · Answer 7 · 2009-08-21T01:15:09+00:00

I was thinking of replacing the symbol in the script itself.
If textbox1.text not null then display in the label.
Same goes to textbox2.text but with the symbol. Now when textbox2.text is cleared then remove symbol. Right?

If that syntax is correct for the scripting language, then you are on the right track.

maybach_hp 0 Newbie Poster · Answer 8 · 2009-08-21T01:25:04+00:00

That code was c#. I am familiar with scripts.

Actually that's a good idea but I am trying to do it in one function.

It was psuedo code from which I can write the script.

Thankyou so much for the help! It was nice working with you. I am on track and I can figure out what to do next.

DdoubleD 315 Posting Shark · Answer 9 · 2009-08-21T01:26:08+00:00

Glad to have helped. Can you please mark as SOLVED. Thanks.

maybach_hp 0 Newbie Poster · Answer 10 · 2009-08-21T01:27:52+00:00

Glad to have helped. Can you please mark as SOLVED. Thanks.

Done already!

dnanetwork 18 Practically a Master Poster Banned · Answer 11 · 2009-08-24T20:30:49+00:00

label lab = (label)page.findcontrol("controlname");
lab.text = "the value you want to add";

maybach_hp 0 Newbie Poster · Answer 12 · 2009-08-24T21:56:15+00:00

Dnanetwork,

We know how to set that but please see what was the requirement.

DdoubleD,

Here is the final script which I am using.

<script type="text/javascript">
function UpdateLabel()
{
var a,b,c,d;
a=document.getElementById('TextBox1').value;
b=document.getElementById('TextBox2').value;
c=document.getElementById('TextBox3').value;
d=document.getElementById('TextBox4').value;
if (b != "")
{
b = ' "' + b + '" '; //This adds ("") before and after the text in textbox2.
}
if (d != "")
{
d = ' -' + d; //This adds (-) before the text in textbox4.
}
if(a == "" && b == "" && c == "" &&d == "")
{
document.getElementById('Label1').value = "Your query goes here!"; //This adds to the label if the textboxes are empty. 
}
else{
document.getElementById('Label1').innerText = a + b + c + d; //This sets the text in the label.
document.getElementById('<%=hidvalue.ClientID %>').value = a + b + c + d; // This is a hidden field which can be 
//accessed on server side code and holds text of the label
}
}
</script>

Thanks again!

DdoubleD 315 Posting Shark · Answer 13 · 2009-08-24T22:15:59+00:00

Thanks for remembering maybach_hp--and bravo!

gopaltiwari2012 0 Newbie Poster · Answer 14 · 2012-09-25T11:23:44+00:00

</head>
    <body>
        <form id="form1" runat="server">

            <asp:TextBox ID="TextBox1" runat="server" onkeyup="document.getElementById('Label1').innerHTML=this.value;"></asp:TextBox>
            <asp:label id="Label1" runat="server"></asp:label>

       </form>


</body>