[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 405
  • Last Modified:

asp.net

how to make an asp.net button invisible/hidden using javascript
0
syamchandrank
Asked:
syamchandrank
1 Solution
 
harpomarxCommented:
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!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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