I have a Label control and a button control. Both are asp control (not HTML). When clicked on button control the label should appear.
Following is the code I wrote. And I want only client-side scripting. The problem is, the label control appears for a second and disappears right away when button is clicked. In the page load event, I put the code to make the Label control invisible. And
in the property of the label control (at design time), it is set to visible. If I use a HTML button control, it works fine. Any help is greatly appreciated.
Client side changes will get refreshed after you post back. So you need to stop the post back behavior of the asp:Button. To do that, add return false at the end of the onClientClick event as below.
Basically it makes a div(with id of div) and puts a newly made label(with id of label) inside the div, and the div is generated inside of an element with an id of host.
I hope it makes sence
This also makes as many labels as you need, doesn't have to be just one.
bnathvbdotne...
Member
1 Points
40 Posts
How to make a Label control appear on a click of a button
May 30, 2012 03:58 PM|LINK
Hello,
I have a Label control and a button control. Both are asp control (not HTML). When clicked on button control the label should appear.
Following is the code I wrote. And I want only client-side scripting. The problem is, the label control appears for a second and disappears right away when button is clicked. In the page load event, I put the code to make the Label control invisible. And in the property of the label control (at design time), it is set to visible. If I use a HTML button control, it works fine. Any help is greatly appreciated.
protected void Page_Load(object sender, EventArgs e) { Label1.Style.Add("visibility", "hidden"); } <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Javascript_MakeaControlAppear.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.Javascript_MakeaControlAppear" %> <!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> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Label">Hello</asp:Label> </div> <div> <asp:Button ID="Button1" runat="server" Text="Button" onclientclick="MakeLabelVisible();"/> </div> </form> <script language="javascript" type="text/javascript"> function MakeLabelVisible() { var labelcontrol = document.getElementById("<%=Label1.ClientID%>"); labelcontrol.style.display = "block"; labelcontrol.style.visibility = "visible"; } </script> </body> </html>adamturner34
Contributor
3962 Points
997 Posts
Re: How to make a Label control appear on a click of a button
May 30, 2012 04:42 PM|LINK
When you use an html control, it is client-side. When you use an asp.net control, it's server-side. You'll notice the runat=server attribute.
This is why you're getting this behavior.
Mudasir.Khan
All-Star
15346 Points
3142 Posts
Re: How to make a Label control appear on a click of a button
May 30, 2012 04:46 PM|LINK
Ruchira
All-Star
43012 Points
7028 Posts
MVP
Re: How to make a Label control appear on a click of a button
May 31, 2012 09:42 AM|LINK
Hello,
Client side changes will get refreshed after you post back. So you need to stop the post back behavior of the asp:Button. To do that, add return false at the end of the onClientClick event as below.
My Tech blog | My YouTube ChannelPlease 'Mark as Answer' if this post helps you.master2080
Member
210 Points
265 Posts
Re: How to make a Label control appear on a click of a button
May 31, 2012 02:50 PM|LINK
I have something similar ready now( but in javascript)
<input type="button" id="labelbutton" onclick="gclick()" style="" value="text"/>
<script type="text/javascript">
var ndiv = document.createElement('div');
ndiv.setAttribute('id', 'div');
document.getElementById('host').appendChild(ndiv);
ndiv = document.createElement('label');
ndiv.setAttribute('id', 'label');
document.getElementById('div').appendChild(ndiv);
</script>
Basically it makes a div(with id of div) and puts a newly made label(with id of label) inside the div, and the div is generated inside of an element with an id of host.
I hope it makes sence
This also makes as many labels as you need, doesn't have to be just one.
bnathvbdotne...
Member
1 Points
40 Posts
Re: How to make a Label control appear on a click of a button
May 31, 2012 03:35 PM|LINK
Thanks a lot folks. making return false works..
Kind regards
This is the best forum i have seen so far.
bnathvbdotne...
Member
1 Points
40 Posts
Re: How to make a Label control appear on a click of a button
May 31, 2012 03:37 PM|LINK
Thanks Ruchira.
Regards