Frames Act Like DHTML

[Total: 0    Average: 0/5]

This example shows how to dynamically alter a web page.

Body Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
var isIE=document.all?true:false;
var isNS4=document.layers?true:false;
var isDOM=document.getElementById?true:false;

function SEL_LIST(_objName,_formName)
{
  this.OBJ_NAME=_objName;
  this.NAME=_formName;
  this.CHOICES=new Array();
  this.SELECTED=0;
  this.AddChoice = function(_c){var i=this.CHOICES.length?this.CHOICES.length:0;this.CHOICES[i]=_c;}
  this.Select = function(_i){this.SELECTED=_i;}
  this.WhatsSelected=function(){return this.SELECTED;}
  this.printSelList = function()
                      {
					    var _s="";
						_s+="<select onchange='top."+this.OBJ_NAME+".Select(this.selectedIndex);top.buildPage();' name='"+this.NAME+"'>";
					    for(var i=0;i<this.CHOICES.length;i++)
						{
						  var _CHK=this.SELECTED==i?"SELECTED":"";
						  _s+="<option "+_CHK+" value="+i+">"+this.CHOICES[i]+"</option>";
						}
						_s+="</select>";
						return(_s);
					  }
}

/*
 * This defines the select lists.
 * Parm 1: the string must be the exact same as the object name.
 * Parm 2: This is the variable that the form will submit.
 */
var SEL1=new SEL_LIST("SEL1","choiceOne");
    SEL1.AddChoice("CHOOSE");
    SEL1.AddChoice("ONE");
    SEL1.AddChoice("TWO");
    SEL1.Select(0);

var SEL2=new SEL_LIST("SEL2","choiceTwo");
    SEL2.AddChoice("CHOOSE");
	SEL2.AddChoice("ONE-A");
	SEL2.AddChoice("ONE-B");
	SEL2.Select(0);

var SEL3=new SEL_LIST("SEL3","choiceTwo");
    SEL3.AddChoice("CHOOSE");
	SEL3.AddChoice("TWO-A");
	SEL3.AddChoice("TWO-B");
	SEL3.Select(0);

function init()
{
    buildPage();
}

function buildPage()
{
  var _page="<html><head><title>Pick Items</title></head><body>";
  _page+="<form name=myFORM action=page.php method=post>";
  _page+=SEL1.printSelList();
  if(SEL1.WhatsSelected()==1)
    _page+="<HR>"+SEL2.printSelList();
  else if(SEL1.WhatsSelected()==2)
    _page+="<HR>"+SEL3.printSelList();
  _page+="</form></body></html>";
  draw(_page);
}

function draw(_string)
{
  self.frames["_frame"].document.open();
  self.frames["_frame"].document.write(_string);
  self.frames["_frame"].document.close();
}


/*
 * This delay allows the frame to load up.
 * The routine init() could be called from the
 * frame's src HTML file that runs onload.
 */
setTimeout("init()",10);
</script>
</head>
<frameset rows="*">
<frame name=_frame>
</frameset>
</html>

Times Viewed: 4

Leave a Reply

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