Form Dynamically Display Parts

[Total: 0    Average: 0/5]

This shows how to create a form that has a portion of the form shown (or hidden) upon certain user events. (radio button selection by the user in this example)

Body Code:

<form>
<span id="divt1" style="visibility:visible;position:relative;top:0;left:0">
  Type 1 Input:   <input name="t1" type="text"  value="">
</span>
<BR>
<span id="divt2" style="visibility:visible;position:relative;top:0;left:0;">
  Type 2 Input:   <input name="t2" type="text"  value="">
</span>
<BR>
Type 1 Visible  <input name="r1" type="radio" checked value="" onClick="toggleT('divt1','s')"> 
       Hidden   <input name="r1" type="radio" value="" onClick="toggleT('divt1','h')"><BR>
Type 2 Visible  <input name="r2" type="radio" checked value="" onClick="toggleT('divt2','s')"> 
       Hidden   <input name="r2" type="radio" value="" onClick="toggleT('divt2','h')">
</form>
<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>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *