JavaScript listbox problem.

[andrewsmd]

I have an asp page that has two listboxes in it. One is populated from a database with a bunch of categories and the other is empty and is there to store the user's selections. The problem I have is since the options are moved to the second listbox via JS when I submit the page, my asp cannot see those selections. Does anyone have an idea of how I can over come this. Can I add some hidden field or values to the page for my ASP? Here is my code. Thanks,

<%@ Page Title="Associated Staffing: Find a Job" Language="VB" MasterPageFile="~/InternalMaster.master" AutoEventWireup="false"
CodeFile="FindAJob.aspx.vb" Inherits="JobSeekers_FindAJob" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

<script src="../Error.js" type="text/javascript"></script>
<script type = "text/javascript" language = "javascript">

function fnMoveItems(bxFrom, bxTo) {

var varFromBox = document.getElementById(bxFrom);
var varToBox = document.getElementById(bxTo);

if ((varFromBox != null) && (varToBox != null)) {
if (varFromBox.length < 1) {
alert('There are no items in the source ListBox');
return false;
}//if
if (varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an Item to move');
return false;
}//if
while (varFromBox.options.selectedIndex >= 0) {

var optn = document.createElement("OPTION");
optn.text = varFromBox.options[varFromBox.options.selectedIndex].text;
optn.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options.add(optn);
varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox

}//while
}//if
return false;
}//fnMoveItems

function moveSelections(bxFrom, bxTo) {

var varFromBox = document.getElementById(bxFrom);
var varToBox = document.getElementById(bxTo);

if (varFromBox.options.length < 1) {
alert('There are no items in that box');
return false;
} //if

for (var i = 0; i < varFromBox.options.length; ++i) {

var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox.options[i].text;
newOption.value = varFromBox.options[i].value;
varToBox.options[varToBox.options.length] = newOption; //Append the item in Target Listbox

} //for

var i = 0;
var len = varFromBox.options.length;
while (varFromBox.options.length > 1) {

if (varFromBox.options.length = 1) {
varFromBox.remove(0); //Remove the item from Source Listbox
} //if length = 1
else {
varFromBox.remove(1);
} //else

}//while

}//moveSelections

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Title" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<table style="width: 700px">
<tr>
<td style="width: 104px" align="center">
Select the categories you are interested in:
</td>
<td style="width: 133px">
<!-- Filler -->
</td>
<td style="width: 110px">
Current Selections:
</td>
</tr>
<tr>
<td align="center">

<asp:ListBox ID="choices" Width="200px" Height = "200px" runat="server"
SelectionMode="Multiple" DataSourceID="Categories" DataTextField="Category"
DataValueField="CategoryID">

</asp:ListBox>
<asp:SqlDataSource ID="Categories" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>"
SelectCommand="SELECT [Category], [CategoryID] FROM [Categories] ORDER BY [Category]">
</asp:SqlDataSource>

</td>
<td style="width: 133px">
<table>
<tr><td>
<input id="moveSingle" type="button" value=">" onclick = "return fnMoveItems('<%= choices.ClientID %>','<%= selections.ClientID %>');" />
</td></tr>
<tr><td>
<input id="moveAll" type="button" value=">>>" onclick = "return moveSelections('<%= choices.ClientID %>','<%= selections.ClientID %>');" />
</td></tr>
<tr><td>
<input id="removeOne" type="button" value="<" onclick = "return fnMoveItems('<%= selections.ClientID %>','<%= choices.ClientID %>');"/>
</td></tr>
<tr><td>
<input id="removeAll" type="button" value="<<<" onclick = "return moveSelections('<%= selections.ClientID %>','<%= choices.ClientID %>');" />
</td></tr>
</table>
</td>
<td style="width: 110px">
<asp:ListBox ID="selections" Width="200px" Height = "200px" runat="server" SelectionMode="Multiple">
</asp:ListBox>
</td>
</tr>
</table><br />
Branch or Division<br />
<asp:DropDownList ID="branchDrop" runat="server" DataSourceID="Branches"
DataTextField="Branch" DataValueField="BranchID"
AppendDataBoundItems = "true">
<asp:ListItem Value="ALL" Text = "--- All Branches ---"></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="Branches" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>"
SelectCommand="SELECT [Branch], [BranchID] FROM [Branches]">
</asp:SqlDataSource>
<br />
Enter Search Keywords<br />
<asp:TextBox ID="searchInput" runat="server"></asp:TextBox><br />
Jobs that match ANY of my keywords: <asp:RadioButton ID="anyKeyWords" runat="server" GroupName = "searchCriteria" />
<asp:Label ID="errorRadio" CssClass = "errorAstrix" runat="server"></asp:Label><br />
-- OR --<br />
Jobs that match ALL of my keywords: <asp:RadioButton ID="allKeyWords" runat="server" GroupName = "searchCriteria" /><br />
<asp:Button ID = "search" Text = "Search" runat = "server" />
</asp:Content>

[Ocean10000]

I just browsed the code, I didn't try to run it.

Just thinking could you on submit javascript event select all the values in the second list (assuming its a multi select list). So once the form is submitted it will send the values as part of the post event.

[marcel]

It might be easier to use code behind in combination with an AJAX update panel.

[andrewsmd]

Just in case anyone wants it I got it working.
Here is the JavaScript
//this function moves one item over
//to the second listbox and adds
//it to the hidden field
function fnAddItems(bxFrom, bxTo, hiddenId) {

var varFromBox = document.getElementById(bxFrom);
var varToBox = document.getElementById(bxTo);

if ((varFromBox != null) && (varToBox != null)) {
if (varFromBox.length < 1) {
alert('There are no items in the source ListBox');
return false;
} //if
if (varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an Item to move');
return false;
} //if
while (varFromBox.options.selectedIndex >= 0) {

var optn = document.createElement("OPTION");
optn.text = varFromBox.options[varFromBox.options.selectedIndex].text;
optn.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options.add(optn);
varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox

} //while

var temp = "";
//now add the items to the hidden field
for (var i = 0; i < varToBox.options.length; ++i) {

//add all of the values in the to box
//to a variable separating each selection id
//with a ,
temp += varToBox.options[i].value + ",";

} //for

//remove the last character of temp
//because it is an extra ,

var values = temp.substring(0, temp.length - 1);

var h = document.getElementById(hiddenId);
h.value = values;

} //if
return false;
} //fnAddItems

//this function removes one item from the
//second listbox and removes it from
//the hidden field
function fnRemoveItems(bxFrom, bxTo, hiddenId) {

var varFromBox = document.getElementById(bxFrom);
var varToBox = document.getElementById(bxTo);

if ((varFromBox != null) && (varToBox != null)) {
if (varFromBox.length < 1) {
alert('There are no items in the source ListBox');
return false;
} //if
if (varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an Item to move');
return false;
} //if
while (varFromBox.options.selectedIndex >= 0) {

var optn = document.createElement("OPTION");
optn.text = varFromBox.options[varFromBox.options.selectedIndex].text;
optn.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options.add(optn);
varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox

} //while
} //if

var temp = "";
//now remove the items to the hidden field
for (var i = 0; i < varFromBox.options.length; ++i) {

//add all of the values in the to box
//to a variable separating each selection id
//with a ,
temp += varFromBox.options[i].value + ",";

} //for

//remove the last character of temp
//because it is an extra ,

var values = temp.substring(0, temp.length - 1);

var h = document.getElementById(hiddenId);
h.value = values;

return false;
} //fnRemoveItems

//this function moves all of the slections over and adds
//them to the hidden field
function moveSelections(bxFrom, bxTo, hiddenId) {

var varFromBox = document.getElementById(bxFrom);
var varToBox = document.getElementById(bxTo);

if (varFromBox.options.length < 1) {
alert('There are no items in that box');
return false;
} //if

for (var i = 0; i < varFromBox.options.length; ++i) {

var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox.options[i].text;
newOption.value = varFromBox.options[i].value;
varToBox.options[varToBox.options.length] = newOption; //Append the item in Target Listbox

} //for

var i = 0;
var len = varFromBox.options.length;
while (varFromBox.options.length > 1) {

if (varFromBox.options.length = 1) {
varFromBox.remove(0); //Remove the item from Source Listbox
} //if length = 1
else {
varFromBox.remove(1);
} //else

} //while

//add the value all to the listbox
document.getElementById(hiddenId).value = "ALL";

} //moveSelections

//this function removes all of the items
//from the second list box and removes them
//from the hidden field.
function removeSelections(bxFrom, bxTo, hiddenId) {

var varFromBox = document.getElementById(bxFrom);
var varToBox = document.getElementById(bxTo);

if (varFromBox.options.length < 1) {
alert('There are no items in that box');
return false;
} //if

for (var i = 0; i < varFromBox.options.length; ++i) {

var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox.options[i].text;
newOption.value = varFromBox.options[i].value;
varToBox.options[varToBox.options.length] = newOption; //Append the item in Target Listbox

} //for

var i = 0;
var len = varFromBox.options.length;

while (varFromBox.options.length >= 1) {

if (varFromBox.options.length = 1) {

varFromBox.remove(0); //Remove the item from Source Listbox
} //if length = 1
else {
varFromBox.remove(1);
} //else

} //while

//add the value all to the listbox
document.getElementById(hiddenId).value = "";

} //removeSelections

You have to keep a hidden value to get the information back on the server side.

[mattglet]

Ocean10000's suggestion is a lot easier to implement, FYI.

[andrewsmd]

I tried that but something with the way asp runs doesn't like it.

[mattglet]

Honestly, .NET doesn't care what happens on the client side... it comes down to how you code your JS. In a nutshell you create a OnClientClick event for your submit button, which fires off a JS function to loop through all your choices in your "selections" listbox and mark them as selected. After your JS function runs, your form will continue on it's merry way (with your "selections" selected).

In the end, if your other solution works then use it... just pointing out there are more efficient ways to solve that problem.

[Ocean10000]

If you are using the select all before submiting the form option I suggested earlier. You will have to access the request.form[selections.ClientId] to get access to the actual values posted back. Since the Selection List will not have any elements to match this posted back values to, in its items collection on the server side.