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!

Recommended Answers

All 19 Replies

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?

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

Thanks!

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>

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

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()");
        }

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?

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

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

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()");
        }

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?

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?

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?

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.

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.

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

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

Done already!

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

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!

Thanks for remembering maybach_hp--and bravo!

</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>
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.