Question

I have two tables on a webform. On a button click I want to hide one and show the other. I gave them both an Id and I want to set the tables’ style=”display:”

I tried this in javaScript using a function and document.getelementbyid(id).style.display=’none’ but it did not work.

any ideas?

Solution:

OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;" 

Answer 1

I am assuming your tables are .net controls? If so, passing ‘id’ is not enough as .net does not assign the same server id as client-side id.

You need to access the ClientID property of the .net control server-side to get it’s real client-side id:

MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);

The above code shows how you would attach some javascript (please don’t call it java!) to a .net asp:button called MyButton and then have a client-side click on that hide a control called ControlIWantToHide.

Note: the above may need tweaking to make it work across all browsers but the .net stuff is the important factor here and I suspect the ClientID is what you needed all along.

Based on your responses to comments, the elements you are toggling are not .net controls but the button triggering them is, so: (based on the function posted by ebrown):

<script type="text/javascript">
  function hide(id)
  {
     var element = document.getElementById(id);

     element.style.display='none';
  }

  function show(id)
  {
     var element = document.getElementById(id);

     element.style.display='block';
  }
</script>

You could trigger the toggle of an element in your page by attaching the javascript event handler server-side:

MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";

..which will display the element with id tbl1 and hide the one with tbl2. This will work providing the elements you are toggling are not .net controls – ie, they do not have the runat=”server” attribute. Remember, even though you are adding the javascript code to the asp:button on the server, it is only getting executed on the client when they click. Don’t forget to return ‘false’ as shown above to stop the default post-back behaviour of the asp:button.