Listbox Problem

[davidolson]

optionsT Does not show any results.Dont know where is the problem.

<script type="text/javascript" language="javascript">

function AddItemInList(fromLeftToRight, isAll){
	var list1  = document.getElementById('listBoxF');
	var list2  = document.getElementById('listBoxT');
		if(Boolean(fromLeftToRight) == true){
			MoveItems(list1,list2,isAll);
		}else{
			MoveItems(list2,list1,isAll);
		}
		return false;
}
function MoveItems(listFrom, listTo, isAll){
	var toBeRemoved = "";
	if(listFrom.options.length > 0){
		for (i=0; i<listFrom.length; i++){
			if (listFrom.options[i].selected || (isAll == true)){
				if(Exist(listTo, listFrom.options[i].value) == 0){
					listTo[listTo.length] = new Option(listFrom.options[i].text, listFrom.options[i].value, true);
					toBeRemoved = toBeRemoved + listFrom.options[i].value + ';';
				}
			}
		}
	ClearSelection(listTo);
	RemoveFromList(listFrom, toBeRemoved);
	}else{
		alert('Unable to Move Items. List is Empty!');
	}
}
function RemoveFromList(listFrom, items){
	var toBeRemoved = items.split(';');
	for (var i=0; i < toBeRemoved.length; i++){
		for (var j = 0; j < listFrom.length; j++){
			if (listFrom.options[j] != null && listFrom.options[j].value == toBeRemoved[i]){
				listFrom.options[j] = null;
			}
		}
	}
}
function ClearSelection(list){
	list.selectedIndex = -1;
}
function Exist(list, value){
	var flag = 0;
	for (var i=0; i < list.length; i++){
		if (list.options[i].value == value){
			flag = 1;
			break;
		}
	}
	return flag;
}

</script>
    
<?php

$opt = isset($_POST['optionsT']) ? $_POST['optionsT'] : '';


if(!empty($_POST['submit'])){
	print $opt;
}

print"  
<form method=\"POST\">
<table style=\"width:100%\">
  	<tr valign=\"top\">
    	<td>Options</td>
    	<td>
        	<select multiple size=\"5\" name=\"optionsF\" id=\"listBoxF\" style=\"width:350px\">
        		<option value=\"1\">1</option>
        		<option value=\"2\">2</option>
        		<option value=\"3\">3</option>
        		<option value=\"4\">4</option>
        	</select>
      		<div align=\"center\">
        		<input type=\"button\" onclick=\"return AddItemInList(true,true)\" value=\"+ All\">
       	 		<input type=\"button\" onclick=\"return AddItemInList(true,false)\" value=\"+\">
        		<input type=\"button\" onclick=\"return AddItemInList(false,false)\" value=\"-\">
        		<input type=\"button\" onclick=\"return AddItemInList(false,true)\" value=\"- All\">
      		</div>
      		<select multiple size=\"5\" name=\"optionsT[]\" id=\"listBoxT\" style=\"width:350px\">
      		</select>
    	</td>
  	</tr>
	<tr>
    	<td></td>
    	<td><input type=\"submit\" name=\"submit\" value=\"Submit\"></td>
  	</tr>
</table>
</form>";
?>	

[Ch0cu3r]

Code works fine, the problem is the items in the second menu needs to be selected before the form is submitted in order for the chosen options to be submitted.

[davidolson]

How to do it without selecting second menu items again?

[Ch0cu3r]

You will need to loop through all the items in the second list and apply the selected attribute to true for each option. To do so add the following code before  return false;  in the  AddItemInList  function

    for(i = 0; i < list2.length; i++) {
        list2[i].selected = true;
    }

[davidolson]

It works. But if I accidently click some second list item and hit submit - it sends only the item what i've accidently clicked. Any solution for that?

[Ch0cu3r]

You could apply an onSubmit event to the form which will selects all the items in the second menu. Why not have a go and see if you can implement that with the for loop code I provided earlier.