none
How to Hide panel Using Javascript in asp.net on Button Click

    Question

  • Good Morning Forms Propositional

    i am trying to hide panel on button click using java script please send me the javascript in asp.net  

     i wrote javascript like this way but still not working
    <script type="text/javascript">
        function fun1()
        {
            document.getElementById("Panel1").visible = false;
        }
    <body>
        <form id="form1" runat="server">
        <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid">
        </asp:Panel> 
    
       
    
        <asp:Button ID="Button1" runat="server" OnClientClick="fun1()" Text="Button" />
        </form>
    
       
    
    </body>



    Pramod

    Thursday, June 21, 2012 5:18 AM

Answers

  • Hi Pramod,

    When a server control renders, the ID changes and hence you JS wont be able to find that id. you can move the panel inside a div with ID and use div id to hide the panel.

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function fun1() {
                document.getElementById("divPanel").style.display = 'none';
                return false;
            } 
        </script>
    </head>

    and in body , within form tag

    <div id="divPanel" >
            <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid">
            <h1>This is data</h1>
            </asp:Panel>
        </div>
        <asp:Button ID="Button1" runat="server"  Text="Hide" onclick="Button1_Click"  />

    and finally at server side, on page load

    Button1.Attributes.Add("onClick", "javascript:fun1();return false;");
    Thats should do , what you want.

    Ashish Ranjan (Please click "Marked As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you)

    • Marked as answer by Pramod Lawate Thursday, June 21, 2012 6:17 AM
    Thursday, June 21, 2012 5:53 AM

All replies

  • Hi Pramod,

    When a server control renders, the ID changes and hence you JS wont be able to find that id. you can move the panel inside a div with ID and use div id to hide the panel.

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function fun1() {
                document.getElementById("divPanel").style.display = 'none';
                return false;
            } 
        </script>
    </head>

    and in body , within form tag

    <div id="divPanel" >
            <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid">
            <h1>This is data</h1>
            </asp:Panel>
        </div>
        <asp:Button ID="Button1" runat="server"  Text="Hide" onclick="Button1_Click"  />

    and finally at server side, on page load

    Button1.Attributes.Add("onClick", "javascript:fun1();return false;");
    Thats should do , what you want.

    Ashish Ranjan (Please click "Marked As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you)

    • Marked as answer by Pramod Lawate Thursday, June 21, 2012 6:17 AM
    Thursday, June 21, 2012 5:53 AM
  • Instead of document.getElementById("Panel1") try this: document.getElementById("<%=Panel1.ClientID%>").

    Thursday, June 21, 2012 6:16 AM