The forms are one on to of each other and I want them to replace each other. Any way I can make that happen?

I am using the following javascript:

<script type=text/javascript>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
  if (isDOM)
  {
    if (_h=='s') document.getElementById(_w).style.visibility='visible';
    if (_h=='h') document.getElementById(_w).style.visibility='hidden';
  }
  else if (isIE) {
    if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
    if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
  }
  else if(isNS4)
  {
    if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
  }
}
</script>

I am using in the context:

<table border="0" cellspacing="0" cellpadding="0" align="right" height="16" bgcolor="#F4EAF3"> 
<tr>
<td align="right" bgcolor="#F4EAF3" valign="middle"><font size="-2" color="#993399"><b>Search:</b></font></td>
<td align="left" bgcolor="#F4EAF3" valign="middle"><form action"" class="searchbox"><input type="radio" name="websitesearch" value="website" class="inputradio" checked onClick="toggleT('divt1','s') + toggleT('divt2','h')"><font size="-2">search</font><br><input type="radio" name="websitesearch" value="webpages" class="inputradio" onClick="toggleT('divt2','s') + toggleT('divt1','h')"><font size="-2">Wedding Websites</font></form></font></td>
<td align="left" bgcolor="#F4EAF3" valign="middle"><span id="divt1" style="visibility:visible;position:static;top:0;left:0">
<form id="removed" action="removed" class="searchbox"><input type="hidden" name="cx" value="removed" /><input type="hidden" name="cof" value="FORID:9" /><input name="q" type="text" size="25" class="inputsearch"/>  <input type="submit" name="sa" class="submitsearch" value="Search" /></form></span>
<span id="divt2" style="visibility:hidden;position:static;top:0;left:0;"><form method="post" name='SearchForm' action="removed" class="searchbox"><input type="text" maxlength="25" name="searchword" value="Last Name" size="25" class="inputsearch"/>  <input type="submit" class="submitsearch" value="Search" /></form>
</span>
</td></tr></table>

create the elements into DOM "on the fly" using a checkbox rather than a radio button, similar to this -> http://www.webmaster-talk.com/javasc...d-new-box.html

if i recall correctly, visibility just makes it invisible, but keeps the element still expanded (so it takes up space, and just leaves a blank white spot when ="hidden")

i suggest using a css/js combo, like doing:

document.getElementById(_w).style.display=''; //Reveals
document.getElementById(_w).style.display='none'; //Hides

And then in each element in the html part, just add a style="display:none;" so that when they first come to the page they'll all be hidden (or leave out whatever u want default displayed, etc).

but basically display will collapse the hidden ones while visibility will just make it... white.

ps: you use null ('') to reveal it because IE screams if you put 'visible'. the '' just overrides the 'none' and so it still shows up.

if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");

is the same as

if (_h=='s') document.all._w.style.visibility='visible';

So you don't need to use eval.

if i recall correctly, visibility just makes it invisible, but keeps the element still expanded (so it takes up space, and just leaves a blank white spot when ="hidden")

Correct.