Ok guys here what I have and my problems--It working but 2 things are wrong:
1. the radio buttons do not show which on is selected.
2. The forms do not overlap each other inthe space the build down.
How do I get the radio buttons to work and get the forms to appear in the same space not below the one above?
--------------------------------------------------------------------
<STYLE TYPE="text/css">
}
#idForm1 {
display: block;
left: 108px;
top: 58px;
width: 400px;
height: 120px;
background-color: #ffffff;
border: thin none #003399;
z-index: auto;
padding: 5px 5px 5px 5px;
visibility: visible;
}
#idForm2 {
display: block;
left: 108px;
top: 58px;
width: 400px;
height: 120px;
background-color: #ffffff;
border: thin None #003399;
z-index: auto;
padding: 5px 5px 5px 5px;
visibility: hidden;
}
#idForm3 {
display: block;
left: 108px;
top: 58px;
width: 400px;
height: 120px;
background-color: #ffffff;
border: thin None #003399;
z-index: auto;
padding: 5px 5px 5px 5px;
visibility: hidden;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--//
// set the path to the qForms directory
qFormAPI.setLibraryPath("../../lib/");
// this loads all the default libraries
qFormAPI.include("*");
qFormAPI.include("wddx");
// this is the DHTML code for show the menus
function showLayer(layer){
strHidden = ( !document.layers ) ? "hidden" : "hide";
strVisible = ( !document.layers ) ? "visible" : "show";
if( document.layers ){
lyrText = document.idForm1;
lyrForm1 = document.idForm2;
lyrForm2 = document.idForm3;
} else if( document.getElementById ){
lyrText = document.getElementById("idForm1").style;
lyrForm1 = document.getElementById("idForm2").style;
lyrForm2 = document.getElementById("idForm3").style;
} else if( document.all ){
lyrText = document.all["idForm1"].style;
lyrForm1 = document.all["idForm2"].style;
lyrForm2 = document.all["idForm3"].style;
}
// update layers
lyrText.visibility = (layer == "idform1") ? strVisible : strHidden;
lyrForm1.visibility = (layer == "idForm2") ? strVisible : strHidden;
lyrForm2.visibility = (layer == "idForm3") ? strVisible : strHidden;
return false;
}
//-->
</SCRIPT>
</head>
<body>
<div align="center">
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><form name="form1" method="post" action="javascript
:void(0);">
<input type="radio" name="radio1" value="idtext" onClick="return showLayer('idform1');">Form Set 1
</form></td>
<td><form name="form2" method="post" action="javascript
:void(0);">
<input type="radio" name="radio2" value="idform1" onClick="return showLayer('idForm2');">Form Set 2
</form></td>
<td><form name="form3" method="post" action="javascript
:void(0);">
<input type="radio" name="radio3" value="idform2" onClick="return showLayer('idForm3');">
Form Set 3</form></td>
</tr>
<tr>
<td colspan="3">
<DIV ID="idForm1">
<FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1">
<B>Name:</B><BR>
<INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input">
<BR>
<B>E-mail:</B><BR>
<INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input">
<BR>
</FORM></DIV>
<DIV ID="idForm2">
<FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1">
<B>Address:</B><BR>
<INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input">
<BR>
<B>City:</B><BR>
<INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input">
<BR>
</FORM>
</DIV>
<DIV ID="idForm3">
<FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample2">
<B>Phone Number</B><BR>
<INPUT TYPE="Text" NAME="Phone" VALUE="" CLASS="input">
<BR>
<B>State</B><BR>
<INPUT TYPE="Text" NAME="State" VALUE="" CLASS="input">
<BR>
</FORM>
</DIV></td>
</tr>
</table>
</div>
</body>
</html>
--------------------------------------------------------------------
Thanks
Rob :-)
Form changes with radio button selection
!!!!!!!!!!!!!!
