Get all options/elements from a select form element

sid

alright - i have a very unexpected and stupid problem with a select field. i am using matt kruses optionTransfer javascript for an administration backend. it all works like a charm, until it gets to the point where the data should be processed.

here is the sample html:

	<table border="0" cellpadding="5" cellspacing="0">
	    <tr>
	        <td>
	            <select name="list_selected[]" size="10" ondblclick="opt.transferRight()" class="select_list" multiple>

            </select>
        </td>
        <td valign="middle" align="center" style="vertical-align: middle; ">
            <img src="../../img/icon_arrow_left.gif" alt="ADD" border="0" onclick="opt.transferLeft()" vspace="1"><br/>
            <img src="../../img/icon_arrow_right.gif" alt="REMOVE" border="0" onclick="opt.transferRight()" vspace="1">
        </td>
        <td>
            <select name="list_all[]" size="10" ondblclick="opt.transferLeft()" class="select_list" style="color: #666666; " multiple>

                                    <option value="1">matt</option>
                                    <option value="2">matt2</option>
                                    <option value="3">bill</option>
                                    <option value="4">bob</option>
                                    <option value="5">jane</option>
                                    <option value="6mary">mary</option>
                                    <option value="7george">george</option>
                                    <option value="8fred">fred</option>
                                    <option value="9ryan">ryan</option>
                                    <option value="10angela">angela</option>
                                    <option value="11jill">jill</option>
            </select>

        </td>
    </tr>
</table>

then, after moving around some of the options, the status could be like that:

	<table border="0" cellpadding="5" cellspacing="0">
	    <tr>
	        <td>
	            <select name="list_selected[]" size="10" ondblclick="opt.transferRight()" class="select_list" multiple>
                                        <option value="4">bob</option>
                                        <option value="5">jane</option>
                                        <option value="6mary">mary</option>
	            </select>
	        </td>
	        <td valign="middle" align="center" style="vertical-align: middle; ">
	            <img src="../../img/icon_arrow_left.gif" alt="ADD" border="0" onclick="opt.transferLeft()" vspace="1"><br/>
	            <img src="../../img/icon_arrow_right.gif" alt="REMOVE" border="0" onclick="opt.transferRight()" vspace="1">
	        </td>
	        <td>
	            <select name="list_all[]" size="10" ondblclick="opt.transferLeft()" class="select_list" style="color: #666666; " multiple>

                                    <option value="1">matt</option>
                                    <option value="2">matt2</option>
                                    <option value="3">bill</option>
                                    <option value="7george">george</option>
                                    <option value="8fred">fred</option>
                                    <option value="9ryan">ryan</option>
                                    <option value="10angela">angela</option>
                                    <option value="11jill">jill</option>
            </select>

        </td>
    </tr>
</table>

like i said, the js functionality works great - the problem starts now, when i POST the form and want to process the data. since the options are not actually selected, but just part of the option set, the values are not being transmitted. If i maually highlight all the options, it works - but thats not a very user friendly option.

the desired result should be

$_POST['list_selected'][0] = "4";
$_POST['list_selected'][1] = "5";
$_POST['list_selected'][2] = "6mary";

$_POST['list_all'][0] = "1";
$_POST['list_all'][1] = "2";
$_POST['list_all'][2] = "3";
$_POST['list_all'][3] = "7george";
$_POST['list_all'][4] = "8fred";
$_POST['list_all'][5] = "9ryan";
$_POST['list_all'][6] = "10angela";
$_POST['list_all'][7] = "11jill";

does anyone have a fix/workaround for this issue at hand? i'd be very thankful for any help!

sid

in that case: duh, the script holds the solution:

Left list contents: <INPUT TYPE="text" NAME="newLeft" VALUE="" SIZE=70>

however, id still be interested in a solution to the whole original issue...

thanks.

Weedpacket

Well, whatever happens, unselected entries in a dropdown are not part of the form submission. So for them to be submitted, either they have to be selected, or they have to be copied to some other part of the form where they will be part of the submission.

I guess you could onSubmit run through the lists and select all the items they contain, before actually submitting, or is this what you mean by "manually highlighting"?

If you were happy messing with the DOM you could generate a bunch of hidden input elements, appropriately named, to contain the values.

A third idea; have a pair of arrays shadowing the two dropdowns; each time they change, the arrays' contents change appropriately. On submit, serialise their values in some way (a string like "1#2#3#7george#8fred#9ryan#10angela#11jill" may do - it assumes that '#' won't appear), and put those strings into two hidden fields there for the purpose. The downside is of course that the resulting string has to be broken apart again server-side before anything can be done with it, but more importantly it makes assumptions about what characters can and can't appear in the dropdown's values. The previous idea avoids that, because anything that's a valid value for a selected dropdown item is a valid value for a hidden field.

The third idea continues: the shadowing arrays aren't necessary - those arrays are already present in the dropdown objects themselves (that, after all, is how the transfer functions are able to work).