How to make a Label control appear on a click of a button

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>

Re: How to make a Label control appear on a click of a button

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.

Re: How to make a Label control appear on a click of a button

try this

<asp:Button ID="Button1" runat="server" Text="Button" onclientclick="return MakeLabelVisible();"/>

  <script language="javascript" type="text/javascript">

        function MakeLabelVisible() {
            
            var labelcontrol = document.getElementById("<%=Label1.ClientID%>");

            labelcontrol.style.display = "block";
            labelcontrol.style.visibility = "visible";

return false;

        }
    </script>

Re: How to make a Label control appear on a click of a button

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.

<asp:Button ID="Button1" runat="server" Text="Button" onclientclick="MakeLabelVisible(); return false;"/>

Re: How to make a Label control appear on a click of a button

I have something similar ready now( but in 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.

Re: How to make a Label control appear on a click of a button

Thanks a lot folks. making return false works..

Kind regards

This is the best forum i have seen so far.

Re: How to make a Label control appear on a click of a button

Thanks Ruchira.

Regards