Hide/Show html forms using javascript

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,154 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,449 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2317 | Replies: 3

•

Join Date: Oct 2007

Posts: 63

Reputation: still_learning is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

still_learning still_learning is offline

Offline

Junior Poster in Training

Hide/Show html forms using javascript

Apr 28th, 2008

Hi guys,

I am working on a webpage which holds 2 different html forms. One of them is a radio button form and the other one is a drop down menu. I also have two links on the page. I want to make it so that when someone clicks on link 1 the radio button form will be visible, and if they click on link 2, the radio button form will be hidden and the drop down menu will be visible. It is probably very easy but I am new to this stuff and I could use your help. Thanks!

•

Join Date: Apr 2008

Posts: 3

Reputation: yesintlcorp is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

yesintlcorp yesintlcorp is offline

Offline

Newbie Poster

Re: Hide/Show html forms using javascript

Apr 29th, 2008

Try this one out you might like it:

Here is a small piece of code which will give you your browser details such as...
current resolution
maximum resolution
browser name
browser version:
color depth
code name
platform
java status

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Browser Details...</title> 
<script language="javascript" type="text/javascript"> 
function details() { 
window.onerror=null; 
document.frmDetails.navigator.value = navigator.appName; 
document.frmDetails.version.value = navigator.appVersion; 
document.frmDetails.colordepth.value = window.screen.colorDepth; 
document.frmDetails.width.value = window.screen.width; 
document.frmDetails.height.value = window.screen.height; 
document.frmDetails.maxwidth.value = window.screen.availWidth; 
document.frmDetails.maxheight.value = window.screen.availHeight; 
document.frmDetails.codename.value = navigator.appCodeName; 
document.frmDetails.platform.value = navigator.platform; 
if (navigator.javaEnabled() < 1) document.frmDetails.java.value="No"; 
if (navigator.javaEnabled() == 1) document.frmDetails.java.value="Yes"; 
 
} 
 
</script> 
</head> 
 
<body onload="details();"> 
 
 
<form name=frmDetails> 
<table border=1 width=499> 
 
<tr> 
<td width="133">current resolution:</td> 
<td width="350" align=center><input type=text size=4 maxlength=4 name=width> 
x <input type=text size=4 maxlength=4 name=height></td> 
</tr> 
 
<tr> 
<td> 
browser:</td> 
<td align=center><input type=text  name=navigator></td> 
</tr> 
<tr> 
<td> 
max resolution:</td> 
<td align=center><input type=text size=4 maxlength=4 name=maxwidth> 
x <input type=text size=4 maxlength=4 name=maxheight></td> 
</tr> 
 
<tr> 
<td> 
version:</td> 
<td align=center><input type=text  name=version></td> 
</tr> 
 
<tr> 
<td> 
color depth:</td> 
<td align=center><input type=text size=2 maxlength=2 name=colordepth> bit</td> 
</tr> 
 
<tr> 
<td> 
code name:</td> 
<td align=center><input type=text  name=codename></td> 
</tr> 
 
<tr> 
<td> 
platform:</td> 
<td align=center><input type=text  name=platform></td> 
</tr> 
 
<tr> 
<td> 
java enabled:</td> 
<td align=center><input type=text size=3 maxlength=3 name=java></td> 
</tr> 
 
<tr> 
<td colspan=2 align=center> 
<input type=button name=again value="Refresh?" onclick="details();"></td> 
</tr> 
</table> 
</form> 
 
</body> 
</html> 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Browser Details...</title> 
<script language="javascript" type="text/javascript"> 
function details() { 
window.onerror=null; 
document.frmDetails.navigator.value = navigator.appName; 
document.frmDetails.version.value = navigator.appVersion; 
document.frmDetails.colordepth.value = window.screen.colorDepth; 
document.frmDetails.width.value = window.screen.width; 
document.frmDetails.height.value = window.screen.height; 
document.frmDetails.maxwidth.value = window.screen.availWidth; 
document.frmDetails.maxheight.value = window.screen.availHeight; 
document.frmDetails.codename.value = navigator.appCodeName; 
document.frmDetails.platform.value = navigator.platform; 
if (navigator.javaEnabled() < 1) document.frmDetails.java.value="No"; 
if (navigator.javaEnabled() == 1) document.frmDetails.java.value="Yes"; 

} 

</script> 
</head> 

<body onload="details();"> 


<form name=frmDetails> 
<table border=1 width=499> 

<tr> 
<td width="133">current resolution:</td> 
<td width="350" align=center><input type=text size=4 maxlength=4 name=width> 
x <input type=text size=4 maxlength=4 name=height></td> 
</tr> 

<tr> 
<td> 
browser:</td> 
<td align=center><input type=text  name=navigator></td> 
</tr> 
<tr> 
<td> 
max resolution:</td> 
<td align=center><input type=text size=4 maxlength=4 name=maxwidth> 
x <input type=text size=4 maxlength=4 name=maxheight></td> 
</tr> 

<tr> 
<td> 
version:</td> 
<td align=center><input type=text  name=version></td> 
</tr> 

<tr> 
<td> 
color depth:</td> 
<td align=center><input type=text size=2 maxlength=2 name=colordepth> bit</td> 
</tr> 

<tr> 
<td> 
code name:</td> 
<td align=center><input type=text  name=codename></td> 
</tr> 

<tr> 
<td> 
platform:</td> 
<td align=center><input type=text  name=platform></td> 
</tr> 

<tr> 
<td> 
java enabled:</td> 
<td align=center><input type=text size=3 maxlength=3 name=java></td> 
</tr> 

<tr> 
<td colspan=2 align=center> 
<input type=button name=again value="Refresh?" onclick="details();"></td> 
</tr> 
</table> 
</form> 

</body> 
</html> 

This comes from http://www.weberdev.com/get_example-4758.html

Thanks,

Yesintlcorp
<snipped>

Last edited by peter_budo : Apr 30th, 2008 at 7:45 am. Reason: Keep It Organized - plase use [code] tags

•

Join Date: Apr 2008

Posts: 3

Reputation: yesintlcorp is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

yesintlcorp yesintlcorp is offline

Offline

Newbie Poster

Re: Hide/Show html forms using javascript

Apr 29th, 2008

Have a look at this one as well: it might be more relevant to your question:

Look into CSS particularly the visibility: hidden/visible attribute. I have an example on my hard drive which I post here as I haven't answered this question here before... much!!:

Help with Code Tags asp Syntax (Toggle Plain Text)

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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>
    <title>ShowHideControl</title>
    <script type="text/javascript">
        function toggleVisibility(controlId) 
       {
            var control = document.getElementById(controlId);
            if(control.style.visibility == "visible" || control.style.visibility == "")
                control.style.visibility = "hidden";
            else
                 control.style.visibility = "visible";
         }
    </script>
    <script type="text/javascript">
    function toggleTable(button)
    {
       if(button.value == "Show")
        {
            button.value = "Hide";
            document.getElementById("table1").style.visibility = "visible";
       }
       else
       {
            button.value = "Show";
            document.getElementById("table1").style.visibility = "hidden";
       }
    }
</script>
 </head>
<body>
    <input type="text" id="TextBox1" />
    <input type="button" id="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" />
    <table id="table1" style="visibility: hidden">
    <tr><td>A table Cell</td></tr>
    </table>
<input type="button" id="btnToggle" value="Show" onclick="toggleTable(this);" />
</body>
</html>
<!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>
    <title>ShowHideControl</title>
    <script type="text/javascript">
        function toggleVisibility(controlId) 
       {
            var control = document.getElementById(controlId);
            if(control.style.visibility == "visible" || control.style.visibility == "")
                control.style.visibility = "hidden";
            else
                 control.style.visibility = "visible";
         }
    </script>
    <script type="text/javascript">
    function toggleTable(button)
    {
       if(button.value == "Show")
        {
            button.value = "Hide";
            document.getElementById("table1").style.visibility = "visible";
       }
       else
       {
            button.value = "Show";
            document.getElementById("table1").style.visibility = "hidden";
       }
    }
</script>
 </head>
<body>
    <input type="text" id="TextBox1" />
    <input type="button" id="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" />
    <table id="table1" style="visibility: hidden">
    <tr><td>A table Cell</td></tr>
    </table>
<input type="button" id="btnToggle" value="Show" onclick="toggleTable(this);" />
</body>
</html>

This comes from
http://www.daniweb.com/forums/thread88102.html

Thanks,

Yesintlcorp
<snipped>

Last edited by peter_budo : Apr 30th, 2008 at 7:50 am.

•

Join Date: Apr 2008

Posts: 3

Reputation: yesintlcorp is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

yesintlcorp yesintlcorp is offline

Offline

Newbie Poster

Re: Hide/Show html forms using javascript

Apr 30th, 2008

Hello still_learning,
I have tried and tested this works:

docuemnt.getElementbyId("<tableid>").style.visibility:"visible" or "hidden" works fine as per your need.

Regards,

yesintlcorp
<snipped>

Last edited by peter_budo : Apr 30th, 2008 at 7:50 am. Reason: Keep It Spam-Free Do not spam, advertise, plug your website, or engage in any other type of self promotion.