How to Hide/Show a Button upon clicking another Button using JavaScript

Question

I have a button that is hidden by default but would like to make the button visible only after clicking another button. I am using JavaScript to accomplish this but it is not working so far and I am not sure what am I doing wrong here.

Here is the code that fires the showButton function:

 <asp:Button ID="btnUpdate" runat="server" Text="SAVE" OnClick = "Update" Visible = "false" OnClientClick="return showButton();" 
    Font-Bold="False" Font-Size="Large" Height="30px" Width="157px"/>

and here is the button that is hidden by default

<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="183px" Visible="false"
    onclick="btnSubmit_Click" 
     OnClientClick="return validate();" 
      Font-Bold="True" Font-Size="Medium" Height="30px" 
      style="margin-right: 1px; margin-left: 185px;" ForeColor="#336699" />

and here is my javascript:

<script type ="text/javascript">
    function showButton() {
        document.getElementById('btnSubmit').style.visibility = 'visible';
    }

</script>

Answer 1

On asp.net when you set Visible="false" means that the button will not even render on page.

So your code can not work because at the first place your button not exist on final page, not render on final page.

What you must do is to hide it with css, eg, add style="visibility:hidden" and Visible="true".

Second, when you try to get it with javascript you need to get the final rendered id as

<script type ="text/javascript">
    function showButton() {
        document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'visible';
    }
</script>

To sumarize

• Remove the Visible, or set it to true
• Hide it with css style
• Use asp.net code to get the rendered id