Change visibility of ASP NET label with JavaScript

Question

I have a ASP NET page with an asp button that is not visible  I can t turn it visible with JavaScript because it is not rendered to the page   What can I do to resolve this

User · Answer

You need to be wary of XSS when doing stuff like this:

document.getElementById('<%= Label1.ClientID %>').style.display

The chances are that no-one will be able to tamper with the ClientID of Label1 in this instance, but just to be on the safe side you might want pass it's value through one of the AntiXss library's methods:

document.getElementById('<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>').style.display

User · Answer

Try this     lt asp Button id  myButton  runat  server  style  display none  Text  Click Me    gt    lt script type  text javascript  gt      function ShowButton             var buttonID     lt    myButton ClientID   gt            var button   document getElementById buttonID           if button    button style display    inherit            lt  script gt    Don t use server-side code to do this because that would require a postback  Instead of using Visibility  false   you can just set a CSS property that hides the button  Then  in javascript  switch that property back whenever you want to show the button again   The ClientID is used because it can be different from the server ID if the button is inside a Naming Container control  These include Panels of various sorts

User · Answer

If you need to manipulate it on the client side  you can t use the Visible property on the server side   Instead  set its CSS display style to  none    For example    lt asp Label runat  server  id  Label1  style  display  none     gt    Then  you could make it visible on the client side with   document getElementById  Label1   style display    inherit     You could make it hidden again with   document getElementById  Label1   style display    none     Keep in mind that there may be issues with the ClientID being more complex than  Label1  in practice   You ll need to use the ClientID with getElementById  not the server side ID  if they differ

User · Answer

This is the easiest way I found           BtnUpload Style Add  display    none            FileUploader Style Add  display    none            BtnAccept Style Add  display    inherit            BtnClear Style Add  display    inherit      I have the opposite in the Else  so it handles displaying them as well   This can go in the Page s Load or in a method to refresh the controls on the page

User · Answer

Make sure the Visible property is set to true or the control won t render to the page  Then you can use script to manipulate it

User · Answer

Continuing with what Dave Ward said    You can t set the Visible property to false because the control will not be rendered  You should use the Style property to set it s display to none      Page Control design   lt asp Label runat  server  ID  Label1  Style  display  none     gt    lt asp Button runat  server  ID  Button1    gt      Code behind  Somewhere in the load section   Label label1    Label FindControl  Label1      Label FindControl  Button1    OnClientClick    ToggleVisibility      label1 ClientID             Javascript file  function ToggleVisibility elementID        var element   document getElementByID elementID        if  element style display    none                 element style display    inherit             else               element style display    none               Of course  if you don t want to toggle but just to show the button label then adjust the javascript method accordingly   The important point here is that you need to send the information about the ClientID of the control that you want to manipulate on the client side to the javascript file either setting global variables or through a function parameter as in my example

User · Answer

If you wait until the page is loaded  and then set the button s display to none  that should work  Then you can make it visible at a later point

[asp.net] Change visibility of ASP.NET label with JavaScript

Examples related to asp.net

Examples related to javascript