<p>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.</p>

<p>What can I do to resolve this?</p>

[{'answer_id': 7777, 'author': 'Dave Ward', 'author_id': 60, 'author_profile': 'https://Stackoverflow.com/users/60', 'pm_score': 6, 'selected': True, 'text': '<p>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:</p>\n\n<pre><code>&lt;asp:Label runat="server" id="Label1" style="display: none;" /&gt;\n</code></pre>\n\n<p>Then, you could make it visible on the client side with:</p>\n\n<pre><code>document.getElementById(\'Label1\').style.display = \'inherit\';\n</code></pre>\n\n<p>You could make it hidden again with:</p>\n\n<pre><code>document.getElementById(\'Label1\').style.display = \'none\';\n</code></pre>\n\n<p>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.</p>\n'}, {'answer_id': 7778, 'author': 'Brian Childress', 'author_id': 721, 'author_profile': 'https://Stackoverflow.com/users/721', 'pm_score': 0, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 7783, 'author': 'Alex', 'author_id': 447, 'author_profile': 'https://Stackoverflow.com/users/447', 'pm_score': 0, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 7800, 'author': 'EndangeredMassa', 'author_id': 106, 'author_profile': 'https://Stackoverflow.com/users/106', 'pm_score': 3, 'selected': False, 'text': '<p>Try this. </p>\n\n<pre><code>&lt;asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" /&gt;\n\n&lt;script type="text/javascript"&gt;\n    function ShowButton() {\n        var buttonID = \'&lt;%= myButton.ClientID %&gt;\';\n        var button = document.getElementById(buttonID);\n        if(button) { button.style.display = \'inherit\'; }\n    }\n&lt;/script&gt;\n</code></pre>\n\n<p>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.</p>\n\n<p>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.</p>\n'}, {'answer_id': 7816, 'author': 'mbillard', 'author_id': 810, 'author_profile': 'https://Stackoverflow.com/users/810', 'pm_score': 2, 'selected': False, 'text': '<p>Continuing with what <strong>Dave Ward</strong> said:</p>\n\n<ul>\n<li>You can\'t set the <em>Visible</em> property to false because the control will not be rendered.</li>\n<li>You should use the <em>Style</em> property to set it\'s <em>display</em> to <em>none</em>.</li>\n</ul>\n\n<hr>\n\n<p><strong>Page/Control design</strong></p>\n\n<pre><code>&lt;asp:Label runat="server" ID="Label1" Style="display: none;" /&gt;\n\n&lt;asp:Button runat="server" ID="Button1" /&gt;\n</code></pre>\n\n<hr>\n\n<p><strong>Code behind</strong></p>\n\n<p>Somewhere in the load section:</p>\n\n<pre><code>Label label1 = (Label)FindControl("Label1");\n((Label)FindControl("Button1")).OnClientClick = "ToggleVisibility(\'" + label1.ClientID + "\')";\n</code></pre>\n\n<hr>\n\n<p><strong>Javascript file</strong></p>\n\n<pre><code>function ToggleVisibility(elementID)\n{\n    var element = document.getElementByID(elementID);\n\n    if (element.style.display = \'none\')\n    {\n        element.style.display = \'inherit\';\n    }\n    else\n    {\n        element.style.display = \'none\';\n    }\n}\n</code></pre>\n\n<hr>\n\n<p>Of course, if you don\'t want to toggle but just to show the button/label then adjust the javascript method accordingly.</p>\n\n<p>The important point here is that you need to send the information about the <code>ClientID</code> 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.</p>\n'}, {'answer_id': 16297, 'author': 'Ian Oxley', 'author_id': 1904, 'author_profile': 'https://Stackoverflow.com/users/1904', 'pm_score': 2, 'selected': False, 'text': '<p>You need to be wary of <a href="http://en.wikipedia.org/wiki/Cross-site_scripting" rel="nofollow noreferrer">XSS</a> when doing stuff like this:</p>\n\n<pre><code>document.getElementById(\'&lt;%= Label1.ClientID %&gt;\').style.display\n</code></pre>\n\n<p>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 <a href="http://www.microsoft.com/downloads/details.aspx?familyid=EFB9C819-53FF-4F82-BFAF-E11625130C25&amp;displaylang=en" rel="nofollow noreferrer">AntiXss library\'s</a> methods:</p>\n\n<pre><code>document.getElementById(\'&lt;%= AntiXss.JavaScriptEncode(Label1.ClientID) %&gt;\').style.display\n</code></pre>\n'}, {'answer_id': 14803416, 'author': 'Michael Emerick', 'author_id': 2059777, 'author_profile': 'https://Stackoverflow.com/users/2059777', 'pm_score': 1, 'selected': False, 'text': '<p>This is the easiest way I found:</p>\n\n<pre><code>        BtnUpload.Style.Add("display", "none");\n        FileUploader.Style.Add("display", "none");\n        BtnAccept.Style.Add("display", "inherit");\n        BtnClear.Style.Add("display", "inherit");\n</code></pre>\n\n<p>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.</p>\n'}]
['https://Stackoverflow.com/questions/7773', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1013/']