Posted on 2006-05-19
Last Modified: 2010-04-17
how to make an button invisible/hidden using javascript
Question by:syamchandrank
    1 Comment

    Accepted 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' ); = "hidden";    // Do not show element, but still calculate and render its "box" (empty space) = "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, = 'visible'; = '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!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Suggested Solutions

    Title # Comments Views Activity
    sumHeights2  challenge 7 50
    commonTwo  challenge 63 67
    countX 22 48
    How Complex Is This Java Course ? 9 51
    This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
    A short article about a problem I had getting the GPS LocationListener working.
    An introduction to basic programming syntax in Java by creating a simple program. Viewers can follow the tutorial as they create their first class in Java. Definitions and explanations about each element are given to help prepare viewers for future …
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now