CODEWITHSUNDEEP
phpjavascripthtml
aadu
aadu

Reputation: 3254

How to POST all the options in a dropdown

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.

Upvotes: 0

Views: 295

Answers (2)

Dave
Dave

Reputation: 1001

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

Upvotes: 1

Doug
Doug

Reputation: 6442

The values available in the select element are not sent when the form is submitted, just the selected values.

I see two choices here:

  1. Add the item in the second box and automatically select it. Ugly, but it works, unless the user "un-selects" this items. I don't you to do this, though.
  2. Create hidden fields to hold the values of the items. As you "move" an item to the second select, you also add it to the hidden field's value. This implementation is better, because it works regardless of the user messing with the second select (it will serve as a visual component, but won't do actual work).

Upvotes: 2

Related Questions