Question

I’ve coded together these two drop-down lists. One is full of countries and one is empty. When you click on a country and press add, the country moves to the empty drop-down list. You can do this as many times as you want.

But I’m having trouble accessing the post data of the second drop-down list when the form is submitted. Here’s my code:

JavaScript:

function moveData(dir) {
var sF = document.getElementById(((dir == "back")?"destinationSelect":"sourceSelect"));
var dF = document.getElementById(((dir == "back")?"sourceSelect":"destinationSelect"));
if(sF.length == 0 || sF.selectedIndex == -1) return;
while (sF.selectedIndex != -1) {
    dF.options[dF.length] = new Option(sF.options[sF.selectedIndex].text, sF.options[sF.selectedIndex].value);
    sF.options[sF.selectedIndex] = null;
}
}

HTML:

<select name="sourceSelect[]" id="sourceSelect" size="5"  ondblclick="moveData(); return false;">
<optgroup label="North America">
    <option value="NORTHAMERICA_UNITEDSTATES">United States</option>
    <option value="NORTHAMERICA_BAHAMAS">Bahamas</option>
    <option value="NORTHAMERICA_BARBADOS">Barbados</option>
    <option value="NORTHAMERICA_BELIZE">Belize</option>
    <option value="NORTHAMERICA_CANADA">Canada</option>
    <option value="NORTHAMERICA_COSTARICA">Costa Rica</option>
    <option value="NORTHAMERICA_CUBA">Cuba</option>
</select>   

<input type="submit" name="forward" id="button" value=">>>>" onclick="moveData(); return false;"/>
<input type="submit" name="back" id="button" value="<<<<" onclick="moveData('back'); return false;"/>

<select name="destinationSelect[]" id="destinationSelect" size="5" ondblclick="moveData('back'); return false;">

So yeah, I’m not sure how to post the second drop-down list when the form submits or what I need to type to see it. Like echo $_POST[‘destinationSelect[]’] doesn’t work.

Answer 1

when you submit your form, you need to select all the items in your second (selected) field;

    <input name="Submit" type="submit" value="submit"  onclick="selectAllOptions('destinationSelect');" />

then the javascript;

function selectAllOptions(selStr)   {
    var selObj = document.getElementById(selStr);
    for (var i=0; i<selObj.options.length; i++) {
        selObj.options[i].selected = true;
    }
}

otherwise they are in there but not selected