Menu
Please see the code below:
Every thing works fine except
When i want to remove the values from delete Users. When i remove them one by one they get added in their right select Box. ALso when i select only Active Users or Inactive Users they get added in the right select Box. Problem is when i select All every thing gets added in the In Active User list. dotn know what i am doing wrong here is the code:
Code:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
var NS4 = (navigator.appName == “Netscape” && parseInt(navigator.appVersion) < 5);
function addOption(theSel, theText, theValue)
{
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;
}
function deleteOption(theSel, theIndex)
{
var selLength = theSel.length;
if(selLength>0)
{
theSel.options[theIndex] = null;
}
}
function moveOptions(theActiveUserFrom,theInactiveUserFrom, theDeleteTo)
{
var selLength = theActiveUserFrom.length;
var inactiveUserLength = theInactiveUserFrom.length;
var deleteSelectBox = theDeleteTo.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;
var i;
// Find the selected Options in reverse order
// and delete them from the ‘from’ Select.
for(i=selLength-1; i>=0; i–)
{
if(theActiveUserFrom.options[i].selected)
{
selectedText[selectedCount] = theActiveUserFrom.options[i].text;
selectedValues[selectedCount] = theActiveUserFrom.options[i].value;
deleteOption(theActiveUserFrom, i);
selectedCount++;
}
}
for(i=inactiveUserLength-1; i>=0; i–)
{
if(theInactiveUserFrom.options[i].selected)
{
selectedText[selectedCount] = theInactiveUserFrom.options[i].text;
selectedValues[selectedCount] = theInactiveUserFrom.options[i].value;
deleteOption(theInactiveUserFrom, i);
selectedCount++;
}
}
// Add the selected text/values in reverse order.
// This will add the Options to the ‘to’ Select
// in the same order as they were in the ‘from’ Select.
for(i=selectedCount-1; i>=0; i–)
{
addOption(theDeleteTo, selectedText[i], selectedValues[i]);
}
if(NS4) history.go(0);
}
function moveBack(theDeleteFrom, theActiveUserTo,theInactiveUserTo)
{
var deleteSelectBox = document.getElementById(‘DeleteUsers’);
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;
var i;
// Find the selected Options in reverse order
// and delete them from the ‘from’ Select.
for(i=deleteSelectBox.length-1; i>=0; i–)
{
// Check for the value
if(deleteSelectBox.options[i].selected)
{
if(deleteSelectBox.options[i].value == “active”)
{
alert(“Active”);
var optThis = new Option();
optThis.text = deleteSelectBox[deleteSelectBox.selectedIndex].text;
optThis.value = deleteSelectBox[deleteSelectBox.selectedIndex].value;
optThis.defaultSelected = false;
optThis.Selected = false;
//remove from left
deleteSelectBox.remove(deleteSelectBox.selectedIndex);
//add to right
document.getElementById(‘ActiveUserList’).add(optThis);
} else
{
alert(“Inactive”);
var optThis = new Option();
optThis.text = deleteSelectBox[deleteSelectBox.selectedIndex].text;
optThis.value = deleteSelectBox[deleteSelectBox.selectedIndex].value;
optThis.defaultSelected = false;
optThis.Selected = false;
//remove from left bottom
deleteSelectBox.remove(deleteSelectBox.selectedIndex);
//add to right
document.getElementById(‘InActiveUsers’).add(optThis);
}
}
}
}
</SCRIPT>
</HEAD>
<body>
<FORM name=myForm METHOD=POST ACTION=”UserEditSrv”>
<TABLE BGCOLOR=”#FFFFFF” BORDER=0 CELLPADDING=2 CELLSPACING=0 ALIGN=CENTER>
<TR>
<TD COLSPAN=3>
<FONT SIZE=2 FACE=”Arial, Helvetica, sans serif” COLOR=”#000000″>
<B></B>
</TD>
</TR>
<TR>
<TD align=LEFT>
<table width=”100″ border=”0″ align=”center”>
<tr>
<TD> </TD>
<td>
</td>
</tr>
<tr>
<TD> </TD>
<td><FONT SIZE=2 FACE=”Arial, Helvetica, sans serif” COLOR=”#000000″>
<B>Active Users</B>
</td>
</tr>
<tr>
<TD> </TD>
<TD ALIGN=left VALIGN=center>
<SELECT NAME=”ActiveUserList” MULTIPLE SIZE=15 width=220 id =”ActiveUserList” >
<!– Display All current Users –>
<OPTION value=”active”>Active1 </OPTION>
<OPTION value=”active”>Active2 </OPTION>
<OPTION value=”active”>Active3 </OPTION>
<OPTION value=”active”>Active4 </OPTION>
<OPTION value=”active”>Active5 </OPTION>
<OPTION value=”active”>Active6 </OPTION>
<OPTION value=”active”>Active7 </OPTION>
<OPTION value=”active”>Active8 </OPTION>
<OPTION value=”active”>Active9 </OPTION>
<OPTION value=”active”> Active10 </OPTION>
<OPTION value=”active”>Active11 </OPTION>
<OPTION value=”active”>Active12</OPTION>
<OPTION value=”active”>Active13</OPTION>
<OPTION value=”active”>Active14 </OPTION>
<OPTION value=”active”>Active15</OPTION>
<OPTION value=”active”>Active16</OPTION>
<OPTION value=”active”>Active17</OPTION>
</SELECT>
</TD>
</tr>
<tr>
<td><FONT SIZE=2 FACE=”Arial, Helvetica, sans serif” COLOR=”#000000″>
<B>In Active ( yy/mm/dd )</B>
</td>
<td><FONT SIZE=2 FACE=”Arial, Helvetica, sans serif” COLOR=”#000000″>
<B>In Active Users</B>
</td>
<TD ALIGN=CENTER VALIGN=center>
<TABLE WIDTH=100>
<TR>
<TD>
<INPUT TYPE=BUTTON width=100 VALUE=”Add >>” WIDTH=100 onclick=”moveOptions(this.form.ActiveUserList,this.form.InActiveUsers, this.form.DeleteUsers);”>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE=BUTTON width=100 VALUE=”<< Remove” WIDTH=100 onclick=”moveBack(this.form.DeleteUsers, this.form.InActiveUsers, this.form.ActiveUserList);”>
</TD>
</TR>
</TABLE>
</TD>
</tr>
<tr>
<TD ALIGN=left VALIGN=center>
<SELECT NAME=”InactiveSince” MULTIPLE SIZE=15 width=220 disabled=”disabled”>
<!– Display the inactive period –>
<OPTION value=””>01/01/02
<OPTION value=””>01/01/02
<OPTION value=””>01/01/02
<OPTION value=””>01/01/02
<OPTION value=””>01/01/02
</SELECT>
</TD>
<TD ALIGN=left VALIGN=center>
<SELECT NAME=”InActiveUsers” MULTIPLE SIZE=15 width=220>
<!– Display the Inactive Users –>
<OPTION value=”inactive”>Inactive1
<OPTION value=”inactive”>Inactive2
<OPTION value=”inactive”>Inactive3
<OPTION value=”inactive”>Inactive4
<OPTION value=”inactive”>Inactive5
</SELECT>
</TD>
</tr>
</table>
</TD>
<!– add another TD for –>
<TD ALIGN=CENTER VALIGN=top>
<TABLE WIDTH=100>
<TR>
</br>
</br>
</br>
</br>
<td VALIGN=”top”><FONT SIZE=2 FACE=”Arial, Helvetica, sans serif” COLOR=”#000000″>
<B>Delete Users</B>
</td>
</TR>
<TR>
<TD ALIGN=left VALIGN=top>
<SELECT NAME=”DeleteUsers” MULTIPLE SIZE=25 width=220>
</SELECT>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD></TD>
<TD VALIGN=center ALIGN=center>
<INPUT TYPE=BUTTON VALUE=”Save Delete” WIDTH=100 onClick=”submitForm()”>
</TD>
<TD width=”150″>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>