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!
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
<!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>
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)
<!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>
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>
It appears that at first you don't need two forms to get this functionality working. You can easly control the action (URL where the form is directed to submit) by simple javascript.
The way I would do it is to put the default action attribute and to change it on click of the radio button so that my form knows where to take it. You can use the post method in case you want to hide it from the user.
Thank you,
Ryan
how to hide the existing form
For the two forms create a div with seperate id and use the
docuemnt.getElementbyId("<divid>").style.visibility:"visible" or "hidden"docuemnt.getElementbyId("<divid>").style.visibility:"visible" or "hidden"
That code has obviously not been tested.
The keyword document is misspelled.
document.getElementbyId("<divid>").style.visibility:"visible" or "hidden"Thanks for pointed out. This is just to give an idea on how to proceed his job.
The OP won't find that easy; getElementById() is also misspelled.
Posting careless typing as 'code' just to get the highlight effect does not seem like a Good Idea.
Again thanks fxm. Now I would like to post a good sample to get an idea.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Quality Planning and Quality Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function showDiv(e) {
var divs = document.getElementsByTagName('div');
if (e==1) {
for(i=0;i<divs.length;i++){
if (divs[i].id=="hidevar1") divs[i].style.visibility="visible";
else if (divs[i].id=="hidevar2") divs[i].style.visibility="hidden";
}
} else {
for(i=0;i<divs.length;i++){
if (divs[i].id=="hidevar1") divs[i].style.visibility="hidden";
else if (divs[i].id=="hidevar2") divs[i].style.visibility="visible";
}
}
}
</script>
</head>
<body>
<div id="hidevar1" style="visibility: visible;">
<form name="frm1" method="post">
Module1 Name : <input type="text" name="txtname" value="Raja">
</form>
</div>
<div id="hidevar2" style="visibility: hidden;">
<form name="frm2" method="post">
Module 2 Name : <input type="text" name="txtname1" value="Rajan">
</form>
</div>
<input type="submit" name="submit" value="Show Form1" onClick="showDiv(1)">
<input type="submit" name="commit" value="Show Form2" onClick="showDiv(2)">
</body>
</html>Still_learning, please work out this sample to have the idea.
Posting careless typing as 'code' just to get the highlight effect does not seem like a Good Idea.
Worse, I now see that it wasn't his own careless typing; he simply copied a line from a post earlier in this thread, with the errors and without attribution.
GIGO.
Mr fxm,
you never going to appreciate thru your thread, please give a solution or encourage the people for that. your last three replies are only pointing out the others mistakes. It was accidentally happened but the solution is there within that. I hope your next reply will give the right direction for the thread starter and not for me.
Even I gave the full code still you pointing others is meaningless. This is the forum to help the thread starter to achieve the solution.
Err
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.