CODEWITHSUNDEEP
javascriptasp.net
moe
moe

Reputation: 5249

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

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>

Upvotes: 3

Views: 6641

Answers (4)

Aristos
Aristos

Reputation: 66641

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

Upvotes: 3

talemyn
talemyn

Reputation: 7950

I'm not as familiar with ASP, so I can't address that aspect of it, but I do know that you are using return showButton(); as your onclick function, but showButton function does not return anything. While some browsers my handle this okay (the latest version of Firefox doesn't seem to care), some may not.

Try either changing OnClientClick="return showButton();" to OnClientClick="showButton();" or adding a return true; statement at the end of the showButton function.

Upvotes: 0

David Hoerster
David Hoerster

Reputation: 28701

You're not setting the ClientID property of the asp:Button explicitly, so depending on how your page is configured, your actual id attribute of the button may be generated with an ID different than "btnSubmit". You should check your generated markup and make sure that the ID you're trying to find matches the one that's "generated" by ASP.NET for the button.

Here's MSDN's docs on ClientID.

Upvotes: 0

0xFADE
0xFADE

Reputation: 832

You can modify the display: style between block and none with classes or directly in the style.

Upvotes: 0

Related Questions