LuigiX
10-15-2003, 01:06 PM
HI
I've been trying to get the same controls on two forms to populate depending which form is visible.
I've tried to add an "if" statement to the populateselect function in order to set the "theform" attribute to the visible form.
Cheers
Luigi
Here's my code:
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Staff Movements</title>
<SCRIPT language="JavaScript">
function switchDiv(div_id)
{
var style_sheet = getStyleObject(div_id);
if (style_sheet)
{
hideAll();
changeObjectVisibility(div_id, "visible");
}
else
{
alert("sorry, this only works in browsers that do Dynamic HTML");
}
}
function getStyleObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4.
//
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
function changeObjectVisibility(objectId, newVisibility) {
// first get the object's stylesheet
var styleObject = getStyleObject(objectId);
// then if we find a stylesheet, set its visibility
// as requested
//
if (styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
return false;
}
}
function hideAll()
{
changeObjectVisibility("newEmp","hidden");
changeObjectVisibility("transferEmp","hidden");
changeObjectVisibility("leavingEmp","hidden");
}
datasets=new Array();
datasets[0]="Manager,John Smith,Alex Misiw,Jeff Watson,Bruno Fish".split(",");
datasets[1]="Delegate,John Paul,Jeff Paul/Wiley Mason,Lisa Presley".split(",");
function populateselect(){
/*Luigi's code*/
if (document.div_id = newEmp) {
theform=document.employmentForm;
} else if (document.div_id = transferEmp) {
theform=document.transferEmploymentForm;
}
sel1 = theform.Manager_Delegate;
sel2 = theform.Completed_By;
sel1.options.length = 0;
sel1.options.length = datasets.length;
for (i=0;i<datasets.length;i++){
sel1.options[i].text = datasets[i][0];
sel1.options[i].value = datasets[i][0];
}
sel1.selectedIndex=0;
changeselect(0);
}
function changeselect(){
sel1 = theform.Manager_Delegate
sel2 = theform.Completed_By
dataset=sel1.selectedIndex;
sel2.options.length = 0;
sel2.options.length = datasets[dataset].length-1;
for (i=1;i<((datasets[dataset].length));i++){
sel2.options[i-1].text = datasets[dataset][i];
sel2.options[i-1].value = datasets[dataset][i];
}
sel2.selectedIndex=0;
}
</script>
</head>
<body onload="populateselect()">
<p><b><font size="6">Employee Movements</font></b> </p>
<p><i>Authorising Manager </i></p>
<hr>
<table id="AutoNumber1" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="99" cellSpacing="0" cellPadding="0" width="400" border="0">
<tr>
<td height="33"><b>Select Category:</b></td>
</tr>
<tr>
<td height="21">
<input onclick="switchDiv('newEmp');" type="radio" CHECKED value="newEmp" name="form_type">
New Employee</td>
</tr>
<tr>
<td height="21">
<input onclick="switchDiv('transferEmp');" type="radio" value="transferEmp" name="form_type">
Transferring</td>
</tr>
<tr>
<td height="21">
<input onclick="switchDiv('leavingEmp');" type="radio" value="leaving" name="form_type">
Leaving</td>
</tr>
</table>
<div id="transferEmp" style=" position:absolute;top:275;left:5;visibility:hidden">
<form name=transferEmploymentForm method="POST" action="--WEBBOT-SELF--">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="500" id="AutoNumber2">
<tr>
<td align="right" width="170">Completed By:</td>
<td width="330">
<select name="Manager_Delegate" onchange="changeselect()" tabindex="2">
</select></td>
</tr>
<tr>
<td align="right" width="170">Name:</td>
<td width="330">
</select>
<select name="Completed_By" tabindex="3">
</select><br>
</td>
</tr>
</table>
<br>
<br>
<p><input type="submit" value="Submit" name="Form_Sent"><input type="reset" value="Reset" name="B2"></p>
</form>
</div>
<div id="newEmp" style=" position:absolute;top:275;left:5;visibility:hidden">
<form name=employmentForm method="POST" action="--WEBBOT-SELF--">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="500" id="AutoNumber2">
<tr>
<td align="right" width="170">Completed By:</td>
<td width="330">
<select name="Manager_Delegate" onchange="changeselect()" tabindex="2">
</select></td>
</tr>
<tr>
<td align="right" width="170">Name:</td>
<td width="330">
</select>
<select name="Completed_By" tabindex="3">
</select><br>
</td>
</tr>
</table>
<br>
<br>
<br>
<p><input type="submit" value="Submit" name="Form_Sent"><input type="reset" value="Reset" name="B2"></p>
</form>
</div>
<br>
</body></html>
I've been trying to get the same controls on two forms to populate depending which form is visible.
I've tried to add an "if" statement to the populateselect function in order to set the "theform" attribute to the visible form.
Cheers
Luigi
Here's my code:
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Staff Movements</title>
<SCRIPT language="JavaScript">
function switchDiv(div_id)
{
var style_sheet = getStyleObject(div_id);
if (style_sheet)
{
hideAll();
changeObjectVisibility(div_id, "visible");
}
else
{
alert("sorry, this only works in browsers that do Dynamic HTML");
}
}
function getStyleObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4.
//
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
function changeObjectVisibility(objectId, newVisibility) {
// first get the object's stylesheet
var styleObject = getStyleObject(objectId);
// then if we find a stylesheet, set its visibility
// as requested
//
if (styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
return false;
}
}
function hideAll()
{
changeObjectVisibility("newEmp","hidden");
changeObjectVisibility("transferEmp","hidden");
changeObjectVisibility("leavingEmp","hidden");
}
datasets=new Array();
datasets[0]="Manager,John Smith,Alex Misiw,Jeff Watson,Bruno Fish".split(",");
datasets[1]="Delegate,John Paul,Jeff Paul/Wiley Mason,Lisa Presley".split(",");
function populateselect(){
/*Luigi's code*/
if (document.div_id = newEmp) {
theform=document.employmentForm;
} else if (document.div_id = transferEmp) {
theform=document.transferEmploymentForm;
}
sel1 = theform.Manager_Delegate;
sel2 = theform.Completed_By;
sel1.options.length = 0;
sel1.options.length = datasets.length;
for (i=0;i<datasets.length;i++){
sel1.options[i].text = datasets[i][0];
sel1.options[i].value = datasets[i][0];
}
sel1.selectedIndex=0;
changeselect(0);
}
function changeselect(){
sel1 = theform.Manager_Delegate
sel2 = theform.Completed_By
dataset=sel1.selectedIndex;
sel2.options.length = 0;
sel2.options.length = datasets[dataset].length-1;
for (i=1;i<((datasets[dataset].length));i++){
sel2.options[i-1].text = datasets[dataset][i];
sel2.options[i-1].value = datasets[dataset][i];
}
sel2.selectedIndex=0;
}
</script>
</head>
<body onload="populateselect()">
<p><b><font size="6">Employee Movements</font></b> </p>
<p><i>Authorising Manager </i></p>
<hr>
<table id="AutoNumber1" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="99" cellSpacing="0" cellPadding="0" width="400" border="0">
<tr>
<td height="33"><b>Select Category:</b></td>
</tr>
<tr>
<td height="21">
<input onclick="switchDiv('newEmp');" type="radio" CHECKED value="newEmp" name="form_type">
New Employee</td>
</tr>
<tr>
<td height="21">
<input onclick="switchDiv('transferEmp');" type="radio" value="transferEmp" name="form_type">
Transferring</td>
</tr>
<tr>
<td height="21">
<input onclick="switchDiv('leavingEmp');" type="radio" value="leaving" name="form_type">
Leaving</td>
</tr>
</table>
<div id="transferEmp" style=" position:absolute;top:275;left:5;visibility:hidden">
<form name=transferEmploymentForm method="POST" action="--WEBBOT-SELF--">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="500" id="AutoNumber2">
<tr>
<td align="right" width="170">Completed By:</td>
<td width="330">
<select name="Manager_Delegate" onchange="changeselect()" tabindex="2">
</select></td>
</tr>
<tr>
<td align="right" width="170">Name:</td>
<td width="330">
</select>
<select name="Completed_By" tabindex="3">
</select><br>
</td>
</tr>
</table>
<br>
<br>
<p><input type="submit" value="Submit" name="Form_Sent"><input type="reset" value="Reset" name="B2"></p>
</form>
</div>
<div id="newEmp" style=" position:absolute;top:275;left:5;visibility:hidden">
<form name=employmentForm method="POST" action="--WEBBOT-SELF--">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="500" id="AutoNumber2">
<tr>
<td align="right" width="170">Completed By:</td>
<td width="330">
<select name="Manager_Delegate" onchange="changeselect()" tabindex="2">
</select></td>
</tr>
<tr>
<td align="right" width="170">Name:</td>
<td width="330">
</select>
<select name="Completed_By" tabindex="3">
</select><br>
</td>
</tr>
</table>
<br>
<br>
<br>
<p><input type="submit" value="Submit" name="Form_Sent"><input type="reset" value="Reset" name="B2"></p>
</form>
</div>
<br>
</body></html>