Web Form Javascript to hide a div not working

I am creating the contacts page of a website and want the div element "contact-area" to hide after they click the "submit button" and a successful email has been sent. The Javascript function to hide a Div element:

function hideDiv(){
    document.getElementbyId(contact-area).style.visible="hidden";
}

The code is called by using "OnClientClick" in the button element:

<asp:Button ID="submitbutton" runat="server" Text="Submit" OnClientClick="hideDiv();" />

When I click the submit button nothing happens. There is no compile errors, is there something I am missing here??

Re: Web Form Javascript to hide a div not working

I think you just need to put double-quotes areound contact-area like document.getElementbyId("contact-area").style.visible="hidden";

Re: Web Form Javascript to hide a div not working

does the page refreshes (post back) after button click? if yes, then hiding div in javascript would not help...

rather you should hide it in button click server event.... like this

content-area.Visible = false;

if it is not posting back on button click, then u can hide div on client side.... but the function should be changed as

function hideDiv(){
document.getElementbyId(contact-area).style.display="none";
return false;
}

and the button tag should look like

<asp:Button ID="submitbutton" runat="server" Text="Submit" OnClientClick="return hideDiv();" />

hope this helps...

Re: Web Form Javascript to hide a div not working

Put contact-area inside quotes: getElementById('contact-area')

Re: Web Form Javascript to hide a div not working

Nope, doesn't work either, Ive already tried double and single quotes. No luck though.

Re: Web Form Javascript to hide a div not working

Another issue is the postback as mentioned previously. You can stop the postback using: OnClientClick="hideDiv();return false;".

Re: Web Form Javascript to hide a div not working

It must use post-back as it refreshes the page, so yes Javascript would not help here then. I thought it was best to use code in the c# file, but I wasn't sure if I could manipulate dom elements from here so I decided to use JavaScript. Originally i had < content-area.Visible = false; > but it does not recognise "content-area", i get 2 errors:

The name "contact" does not exist in the current context

The name "area" does not exist in the current context

Re: Web Form Javascript to hide a div not working

That stops the postback, but the div still isnt hiding.

Re: Web Form Javascript to hide a div not working

Instead of a div use an asp:panel control. It renders as a div but youll have access to it BL is code. You can then show/hide it from code via it's ID.

Re: Web Form Javascript to hide a div not working

chang u r div id=contactarea

check it

document.getElementById('contactarea').style.visibility = 'hidden';

or,

try this way

http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

thank u

Re: Web Form Javascript to hide a div not working

okay..this one working for me -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function call() {
            var ca = document.getElementById('abc');
            ca.style.display = 'none';
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="abc" name="div1">This is Rami</div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return call()" />
    </div>
    </form>
</body>
</html>