• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:


how to make an asp.net button invisible/hidden using javascript
1 Solution
JavaScript exposes CSS properties to HTML elements a through a "style" object.  You can use the "display" or "visibility" properties of the style object to make a button (or other HTML element) invisible.

var btn = document.getElementById( 'myButton' );
btn.style.visibility = "hidden";    // Do not show element, but still calculate and render its "box" (empty space)
btn.style.display = "none";        // Remove element from rendered content flow altogether

Either of the settings will do.  Use the "visibility" approach when you want to toggle the button "in place" -- in other words, when you don't want other elements to be repositioned to fill the space previously occupied by the button.  Otherwise, use "display", which may cause the page to be updated if it affects the layout.

To make the button visible again,

btn.style.visibility = 'visible';
btn.style.display = 'inline';

You indicated, however, that you want to make a button invisible in the context of ASP.NET.  If the button is being rendered as a server-side control (probably System.Web.UI.WebControls.Button), it should have its "Visible" property set to "true" to ensure that an INPUT tag is rendered in the first place.  To reference the button in JavaScript, you need to get the Client ID that is rendered by ASP.NET.  You can do this using a server-side tag.

var btn = document.getElementById( '<%=FindControl("myButton").ClientID %>' );

This will insert the control's full ID into the single quotes as the page is being rendered, and is necessary because the ID of a nested control differs from the one that you set in the server tag.

Hope that this helps!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now