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:
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
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.
philhunter
Member
7 Points
12 Posts
Web Form Javascript to hide a div not working
Feb 21, 2012 03:31 PM|LINK
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:
The code is called by using "OnClientClick" in the button element:
When I click the submit button nothing happens. There is no compile errors, is there something I am missing here??
markfitzme
All-Star
15319 Points
2356 Posts
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:35 PM|LINK
I think you just need to put double-quotes areound contact-area like document.getElementbyId("contact-area").style.visible="hidden";
kedarrkulkar...
All-Star
35547 Points
5696 Posts
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:37 PM|LINK
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...
KK
Please mark as Answer if post helps in resolving your issue
My Site
MetalAsp.Net
All-Star
112699 Points
18359 Posts
Moderator
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:37 PM|LINK
philhunter
Member
7 Points
12 Posts
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:39 PM|LINK
Nope, doesn't work either, Ive already tried double and single quotes. No luck though.
MetalAsp.Net
All-Star
112699 Points
18359 Posts
Moderator
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:45 PM|LINK
philhunter
Member
7 Points
12 Posts
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:49 PM|LINK
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
philhunter
Member
7 Points
12 Posts
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:53 PM|LINK
That stops the postback, but the div still isnt hiding.
MetalAsp.Net
All-Star
112699 Points
18359 Posts
Moderator
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 03:55 PM|LINK
srinanthuram
Contributor
6800 Points
1549 Posts
Re: Web Form Javascript to hide a div not working
Feb 21, 2012 04:09 PM|LINK
hi
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