Two List Boxes and two Buttons - Not an FAQ - F1 please. 2

[Deadline]

Hi,
I have two list boxes, separated by two buttons, named Add and Remove respectively.

When I click Add, the selected choices should go from the first list box to the second list box. When I click remove, it should be vice-versa.

Client-side VBScript is ok.. Or even Javascript is also fine..

I would appreciate if you let me know the logic for entering/updating all the 'Added' items into a (database)table.

Thank you...
RR

 

[vasah20]

use javascript, and the new option constructor to get what you want.

see this for info about new Option

http://developer.irt.org/script/1371.htm

then, just check the selectedIndex of the options to get the text to go where you want it to.

leo leo

 

[Deadline]

Leo,
Thank you very much for the response..
I am also considering the solution from

http://www.learnasp.com/learn/listdual.asp

What is your comment ?

Thank you...
RR

 

[vasah20]

the drawback with is that you need to use ASP to transfer the elements back and forth, meaning you need to put unnecessary load on your server.

it's easier, since you can already leverage the knowledge that you have, but if you can have the client side do the work, then why not?

just my thoughts
leo leo

 

[wushutwist]

ONE: Here is code to use client-side javascript to move items in list boxes:

<script language=&quot;javascript&quot;>
function moveSelected(from,to) {
  newTo = new Array();
  for(i=0; i<from.options.length; i++) {
    if (from.options[i].selected) {
    newTo[newTo.length] = cloneOption(from.options[i]);
    from.options[i] = null;
    i--;
    }
  }
  for(i=0; i<to.options.length; i++) {
    newTo[newTo.length] = cloneOption(to.options[i]);
    newTo[newTo.length-1].selected = false;
  }
  to.options.length = 0;
  for(i=0; i<newTo.length; i++) {
    to.options[to.options.length] = newTo[i];
  }
  selectionChanged(to,from);
}

function selectionChange (selectedElement,unselectedElement) {
  for(i=0; i<unselectedElement.options.length; i++) {
    unselectedElement.options[i].selected=false;
  }
}

function cloneOption(option) {
  var out = new Option(option.text,option.value);
  out.selected = option.selected;
  out.defaultSelected = option.defaultSelected;
  return out;
}
</script>

The method moveSelected() accepts two list boxes and moves the items between them.

TWO: As far as your second question, the important thing to remember is that the list only submits what is selected. So before the form is submitted you must manually (thru javascript) select all items in the list. This can easily be done using the following javascript function and the onSubmit() method of a Form.

<script language=&quot;javascript&quot;>
function selectAll(control) {
  for(i=0; i<control.options.length; i++) {
    control.options[i].selected = true;
  }
}
</script>

The method selectAll() takes a list box as a reference and selects all items in the list.

If you have any questions feel free to ask.
Wushutwist

 

[Deadline]

Excellent!!! Thank you Wushutwist,

I guess, I got it working.. Thank you and Leo very much..

Thank you...
RR