Click to See Complete Forum and Search --> : Pls Help Me


Lily
03-19-2003, 11:40 PM
The code about adding or removing items between two select objects:

....
<SCRIPT language="JavaScript">

function submitAdd(){
var i,j, selectNum,remListNum;
var optionele,eleText,eleValue;
selectNum = document.UserSelectedForm.unassignedUsers.options.length;
remListNum = document.UserSelectedForm.assignedUsers.options.length;

document.UserSelectedForm.unassignedUsers.focus();

if( document.UserSelectedForm.unassignedUsers.selectedIndex == -1)
{
alert("Please select a user to add.");
return false;
}
else{
j = remListNum;
document.write("You've selected the following options:\n")
for( i=0; i < selectNum; i++)
{
if(document.UserSelectedForm.unassignedUsers.options[i].selected)
{
// get the text and value of the selected item
eleText = document.UserSelectedForm.unassignedUsers.options[i].text;
eleValue = document.UserSelectedForm.unassignedUsers.options[i].value;

// remove this option from the unassignedUserList
deleteAnItem(document.UserSelectedForm.unassignedUsers,i);

// chanage the focus
document.UserSelectedForm.unassignedUsers.blur();
document.UserSelectedForm.assignedUsers.focus();

// construct the option
optionele = new Option(eleText,eleValue);

// add the item to the assignedUserList
eval("inForm.assignedUsers.options[j]=optionele");

j++;

// restore the focus
document.UserSelectedForm.assignedUsers.blur();
document.UserSelectedForm.unassignedUsers.focus();
}
}
return true;
}
}


function submitRemove(){
var i,j, selectNum,addListNum;
var optionitem,itemText,itemValue;
selectNum = document.UserSelectedForm.assignedUsers.options.length;
addListNum = document.UserSelectedForm.unassignedUsers.options.length;

if( document.UserSelectedForm.assignedUsers.selectedIndex == -1)
{
alert("Please select a user to remove.");
return false;
}
else{
j = addListNum;

document.write("You've selected the following options:\n")
for( i = 0;i < selectNum ;i++ )
{
if(window.document.UserSelectedForm.assignedUsers.options[i].selected)
{
// get the text and value of the selected item
itemText = window.document.UserSelectedForm.assignedUsers.options[i].text;
itemValue = window.document.UserSelectedForm.assignedUsers.options[i].value;

// remove this option from the unassignedUserList
deleteAnItem(window.document.UserSelectedForm.assignedUsers,i);

// chanage the focus
window.document.UserSelectedForm.assignedUsers.blur();
window.document.UserSelectedForm.unassignedUsers.focus();

// construct the option
optionitem = new Option(itemText,itemValue);

// add the item to the assignedUserList
eval("window.document.UserSelectedForm.unassignedUsers.options[j]=optionitem");

j++;

// restore the focus
window.document.UserSelectedForm.unassignedUsers.blur();
window.document.UserSelectedForm.assignedUsers.focus();
}
}
return true;
}
}

function submitBack(){
var i = 0,remListNum;

remListNum = document.UserSelectedForm.unassignedUsers.options.length;

// focus on the assignedUserList
document.UserSelectedForm.assignedUsersList.focus();

while( i < remListNum )
{

if(!(document.UserSelectedForm.assignedUsers.options[i].selected))
{
document.UserSelectedForm.assignedUsers.options[i].selected = true;
}
}
}

</SCRIPT>


<FORM name="UserSelectedForm" onsubmit="return submitBack()" method="post">

<P><B><FONT size="4">Manage Users</B></P>
<TABLE cellSpacing=2 cellPadding=2 width=500 border=0>
<TBODY>
<TR>
<TD colSpan=2>
<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%"
border=1>
<TBODY>
<TR>
<TD><B>Search for users</B><BR>
<TABLE>
<TBODY>
<TR>
<TD>&nbsp;Search by user name:<BR></TD>
<TD><INPUT type="text" name="keyword" value=""> </TD>
<TD><INPUT class=primarybutton type=submit value=" Go "
name="go"><BR><BR></TD>
</TR>
<TR>
<TD colSpan=3>
<DIV align=center><A
href="<%= showAllUsersURI %>">Show all available Users</A></DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>

<TR>
<TD colSpan=2></TD>
</TR>


<TR>
<TD>&nbsp;&nbsp;4 Users are listed<BR><SELECT
style="WIDTH: 218px; HEIGHT: 246px" multiple size=15
name="unassignedUsers">
<OPTION value="Z"> z</OPTION>
<OPTION value="h"> h </OPTION>
<OPTION value="w"> w </OPTION>
<OPTION value="e"> e </OPTION>
<OPTION value="i"> i </OPTION>
<OPTION value="u"> u </OPTION>
</SELECT>
</TD>

<TD align=left>&nbsp;&nbsp;0 users have been attached<BR><SELECT
style="WIDTH: 218px; HEIGHT: 246px" multiple size=15
name="assignedUsers">
<OPTION value = "doudou">doudou </OPTION>
</SELECT>
</TD>

</TR>

<TR>
<TD align=middle><BR><INPUT type="button" onclick = " return submitAdd()" value=" Add " name="addBtn">
</TD>
<TD align=middle><BR><INPUT type="button" onclick = "return submitRemove()" value=" Remove " name="remBtn">
</TD>
</TR>

<TR>
<TD align=middle colSpan=2><BR><BR><INPUT type=submit onsubmit="submitBack()" value=" Back to Software Edit Page " name="backBtn"></TD>
</TR>
</TBODY>
</TABLE>
</FORM>

..........

when I click on the "Add" button, an error appears, remind me the "document.UserSelectedForm.unassignedUsers" is null or not an object. I don't know why. I can use the name of the Select object directly,right? In the case adding or removing multiple items between two selection, which way is better? Thanks MILLION!

skriptor
03-20-2003, 01:19 AM
Hi,
remove this statement and your code should work:
document.write("You've selected the following options:\n")
This statement destroys the objects you refer later on.
Good luck, skriptor

Lily
03-20-2003, 02:35 AM
Thanks, skriptor,

I did it, but another error appeared:" 'selected' is null or not an object" at the statement:
if(document.UserSelectedForm.unassignedUsers.options
[i].selected)

I double check the properties of options, but find no error. Then I try to modify it as follow:

if(document.UserSelectedForm.unassignedUsers.options
[i].selected == true)

The error is same. :(

skriptor
03-20-2003, 06:03 AM
Hi,
the statement is ok. I think there could be logical error in your script. Function deleteAnItem wasnt send, but I think after calling this function, length of document.UserSelectedForm.unassignedUsers.options is reduced by one, but selectNum has still the value before deleting one item. So you try to access an non existing element. Perhaps a i = selectNum; as last statement in for would help.
Good luck, skriptor.

Lily
03-20-2003, 06:46 AM
Hi,skriptor. You are right!

I just found the error and modified the code as follow:

function submitAdd(){
var i=0,j, selectNum,remListNum;
var optionele,eleText,eleValue;
selectNum = document.UserSelectedForm.unassignedUsers.options.length;
remListNum = document.UserSelectedForm.assignedUsers.options.length;

document.UserSelectedForm.unassignedUsers.focus();

if( document.UserSelectedForm.unassignedUsers.selectedIndex == -1)
{
alert("Please select a user to add.");
return false;
}
else{
j = remListNum;
while( i < selectNum )
{
//alert("Please select a user to add."+"i["+i+"]"+selectNum);
if(document.UserSelectedForm.unassignedUsers.options[i].selected == true)
{
// get the text and value of the selected item
eleText = document.UserSelectedForm.unassignedUsers.options[i].text;
eleValue = document.UserSelectedForm.unassignedUsers.options[i].value;

// remove this option from the unassignedUserList
deleteAnItem(document.UserSelectedForm.unassignedUsers,i);
selectNum = selectNum - 1;

// chanage the focus
document.UserSelectedForm.unassignedUsers.blur();
document.UserSelectedForm.assignedUsers.focus();

// construct the option
optionele = new Option(eleText,eleValue);

// add the item to the assignedUserList
eval("document.UserSelectedForm.assignedUsers.options[j]=optionele");
j++;

// restore the focus
document.UserSelectedForm.assignedUsers.blur();
document.UserSelectedForm.unassignedUsers.focus();

}else
{
i ++;
}

}
return true;
}
}
......
Now it works smoothly. Thanks! :)