Multiple select box question

cstooch · April 13th, 2006, 06:35 PM

I've got a form with 2 multiple select boxes set up.

Basically the left side combo box (cboAvailable) is a list of employees available. The right side combo box (cboSelected) is a list of employees that have been assigned to a team.

You can add members from the left side onto the team on the right. You can remove members from the team combo box (which puts them back into the 'available' combo box on the left).

Theres also a save button on the bottom which I have intended to save all the values on the right combo box to the database (i.e. to build this team in the database).

However, how do I get the values of everything in the right combo box? I've been wrapping my brain around this, seems like it would be so simple. The only way I've been able to find how to do it is to select everything on the right side first, then hit save (then just loop through each selected value like so:

Code:

for i = 1 to Request.Form("cboSelected").Count 
   Rs.AddNew
     Rs.Fields("TeamMember") = Request.Form("cboSelected")(i)
     Rs.Fields("TeamLeader") = "Bob Smith"
   Rs.Update
next

Ignore the database code, that part is irrelevant. Whats REALLY important is being able to pull all options from the right select box, whether they are selected or not.

Is there a way of getting each and every option in the right select box without having anything selected at all?

Thanks

mat41 · April 14th, 2006, 10:24 PM

I have done this assigning all the values (unselected which you intent to insert) using JS to determine the values in question, populating a hidden form field with these values in the form of a commer delimited string during the JS validation, submitting the form, spliting the commer delimited string on the commer and inserting based on looping throught the array of values.

This wss a while ago, was a complex process (my JS is average) let me see if I can dig out the code.

Comments:

;;;Ignore the database code, that part is irrelevant. Whats REALLY important is being able to pull all options from the right select box, whether they are selected or not.

They shouldnt be selected in a 'swap box' (moving values from one multiple select box to another) scenario. An end user is not going to select them even if screen instructions say to, this is not intuative and IMO will confuse users.

Wind is your friend
Matt

mat41 · April 14th, 2006, 10:53 PM

OK Found it:

1..create a page called multipleSwapOnClick.asp (or what ever name you want) then paste the following code (it is cut n paste code):

-----------------------------------start----------------------------
<html>
<HEAD>
  <title>Mulitiple swap on click</title>
<SCRIPT LANGUAGE="JavaScript">

function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options[i].text;
if (thisitem == selectedText) {
isNew = false;
break;
      }
   }
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options[i].selected) {
arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
document.choiceForm.choiceBox.options[i] = null;
   }
}
boxLength = document.choiceForm.choiceBox.length;
   }
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options[i].value;
}
else {
strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
}
count++;
   }
}
if (strValues.length == 0) {
alert("You have made no selection(s)");
}
else {
//alert("Here are the values you've selected:\r\n" + strValues);
  choiceForm.valuesForInsert.value = strValues;
  choiceForm.submit();
  }
}
//// adminGroups multiple select swap code finish

    function validate()
    {

       if(document.choiceForm.groupname.value=="")
       {
          alert("You must enter a group name");
          document.choiceForm.groupname.focus();
          return(false);
       }
       if(document.choiceForm.gDescription.value=="")
       {
          alert("Please enter a brief description, you may edit this anytime");
          document.choiceForm.gDescription.focus();
          return(false);
       }
       saveMe();
   //return (true);
    }

    function groupValidate()
    {

       if(document.adminGroupsComments.suggestionString.v alue=="")
       {
          alert("You must enter a suggestion");
          document.adminGroupsComments.suggestionString.focu s();
          return(false);
       }

     return (true);
    }

</script>
</HEAD>
<BODY>
<form name="choiceForm" action="getchosenSelections.asp" method="post">
<input type="hidden" name="selectedValues" value="0">
<input type="hidden" name="valuesForInsert" value="0">
<table border="0">
<tr>
  <td valign="top" width=175>Available Countries:<br>
  <select name="available" size=10 onchange="moveOver();">
   <option value="1">Australia
   <option value="2">New Zealand
   <option value="3">USA
   <option value="4">Canada
   <option value="5">England
   <option value="6">Switzerland
   <option value="7">Russia
   <option value="8">France
   <option value="9">Italy
   <option value="10">Samoa
  </select></td>
  <td valign="top">Your Choices:<input type="button" value="Remove" onclick="removeMe();"><br><select multiple name="choiceBox" style="width:150;" size="10"></select></td>
</tr>
<tr>
  <td colspan=2><input type="button" value="Submit" onclick="saveMe();"></td>
</tr>
</table>
</form>
</body>
</html>
------------------------------------finish--------------------------

2..Now create a page at the same dir level called getchosenSelections.asp (must be called this unless you change the <form action=""> destination on the above page) Place the following code:

<%= request.form("valuesForInsert") %>

This gives you the ids/values of the unselected chosen selections in the form of a commer delimited string. Now split the commer delimited string on the commer and insert based on looping throught the array of values. I am assuming you dont need assistance with this part?

BTW On the page multipleSwapOnClick.asp uncomment the JS on line 68 to show a JS alert of the values you are about to post. It will alert, once you click OK it will post.

Wind is your friend
Matt

cstooch · April 15th, 2006, 12:16 PM

Thanks for the help!

It was actually a day too late though, but still may be helpful in the future.

However, what I ended up doing is just having some javascript code trigger on the onsubmit event of the form that selected all the options on the right.

Only required about 6 or 7 lines of code to get the job done. I'm not a big fan of javascript though (because some of the users at my work run other browsers that seem to choke on some of the javascript code), so didn't want to do it this way.

mamboElephant · December 10th, 2007, 04:48 PM

Thanks for the code, it's very useful in my case. I'm working on a set of 4 or 5 pairs of swap boxes, what do I need to do?

Many thanks,
K

mat41 · December 10th, 2007, 06:56 PM

Im not sure, what do you need to do? Your question is very unclear...

Wind is your friend
Matt