Getting <select> values with multiple

[pdorman]

Hi there,

I'm working on an application to manage LDAP users and groups. I'm almost finished, but I've encountered a problem. I wrote some code to copy user names between two <select> lists, one with available users, and one with current group members. Double clicking one will shift the value to the other. I do this client side with a few JavaScripts.

When the user is done, they'll click a submit button and I would like my PHP scripts to get an array of all values in one of the lists, as opposed to an array of selected values.

I've tried using JavaScript to feed the list.options.text to a <input type="hidden" name=array[]> on my form, but that does't work for some reason. Is there any way I can POST the list of values? If none are selected, nothing gets sent back.

Thanks in advance. (The merciful will send me code 😉 )

[Weedpacket]

Can you, when you submit, call a Javascript function that will run through all the options of the list and select them - then submit? I'm certain you can, but I don't know off-hand how myself - I'm not that familiar with Javascript.

[pdorman]

That is actually pretty much what I have resorted to. I have a <input type=hidden> field on my form, and a JavaScript function, called with the submit button's 'onClick' event, which iterates through the <select> list's contents, adding to a comma-delimited list which is then assigned to the hidden variable mentioned above.

I tried to make the hidden field an array, but I had no luck getting it to work.

On the PHP side, I call a function to turn the delimited list into an array, which is what I wanted in the first place. I don't like the solution very much, but it seems to work fine.

Any comments?

I'll be happy to provide my code on request.

Thanks for your input!

Paul.

[Weedpacket]

Well, I wasn't thinking of a hidden form; with the select field given an array-ish name ("fieldname[]") , Javascript could run through that field, and set all of its options to selected. Then the submission would go ahead as normal (if the process was slow enough, you'd see the options in the list being highlighted as they're selected). Something like

myList = documents.forms[0].elements['myselect[]'];
for(i=0; i<myList.length; i++)
{	myList[i].selected=true;
}

[pdorman]

True! I actually had that very solution working at one point. I was unhappy with the method though. First there's the visual aspect - seeing the list go black made me unhappy (developer-perfectionist :o).

Also, one of the main reasons I had difficulty was that I couldn't adapt the JavaScript routines I had written to work with the array that is normally used with multi-select <select> tags.

In my current implementation, I use "multiple" in my <select> tag to allow the user to select multiple users to shift from one list to another. I don't however have the select named as an array --> <select name=list1[] multiple>. Instead I use --> <select name=list1 multiple>.

So I have <input type="hidden" name="member_list"> burried there in my form, and the following JavaScript to set its values.

( The hidden <input> field is called "member_list". I have defined some JavaScript vars under my form:

<script language="JavaScript">
var left_list = document.myform.list1;
var right_list = document.myform.list2;
var commit_button = document.myform.submit_button;
var member_list = document.my_form.member_list;
</script>

)

Then I have the following JavaScript which is called with the submit button's 'onClick' event:

function populate_member_list(){
members="";
num_items = right_list.length;
for(i=0;i < num_items;i++){
	if (i < num_items-1){
		members = members + right_list.options[i].text + ",";
		} else members = members + right_list.options[i].text;
	}
	member_list.value=members;
}

Just for the sake of completeness, here is one of my list member transfer JavaScripts. The other one is called "right_to_left()" of course!

	function left_to_right() {
		commit_button.disabled=false;
		for ( i=0; i<left_list.length ; i++){
			if (left_list.options[i].selected == true ) {
			right_list.options[right_list.length]= new Option(left_list.options[i].text);
			}
		}
		for ( i = (left_list.length -1); i>=0; i--){
			if (left_list.options[i].selected == true ) {
			left_list.options[i] = null;
			}
		}
	}

Thanks for your feedback! I really appreciate it. 🙂

And apologies to all for all the JavaScript! It is PHP related, I promise!