Post values from a multiple select

Question

How can I post values from a multiple select in a form? When I hit submit none of the selected values are posted.

<form id="form" action="" method="post">
    <div>
        <select id="inscompSelected" multiple="multiple" class="lstSelected">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>                
        </select>
        <input type="submit" value="submit">
    </div>
</form>

What server side language are you using? – iambriansreed Jul 23 '12 at 16:38 — iambriansreed, Jul 23 '12 at 16:38

score 144 · Accepted Answer · edited Nov 07 '18 at 21:19

144

You need to add a name attribute.

Since this is a multiple select, at the HTTP level, the client just sends multiple name/value pairs with the same name, you can observe this yourself if you use a form with method="GET": someurl?something=1&something=2&something=3.

In the case of PHP, Ruby, and some other library/frameworks out there, you would need to add square braces ([]) at the end of the name. The frameworks will parse that string and wil present it in some easy to use format, like an array.

Apart from manually parsing the request there's no language/framework/library-agnostic way of accessing multiple values, because they all have different APIs

For PHP you can use:

<select name="something[]" id="inscompSelected" multiple="multiple" class="lstSelected">

edited Nov 07 '18 at 21:19

lucascaro

16,550
4
37
47

answered Jul 23 '12 at 16:34

iambriansreed

21,935
6
63
79

12

Since it's a multiple select, you want the name to end with `[]` (so that it's posted as an array). – gen_Eric Jul 23 '12 at 16:36
2

I would also add that if you're using something like PHP you can always dump out the `$_POST` to see what variable are held after the submit. – Biotox Jul 23 '12 at 16:36
65

Adding `[]` at the end of the name is a PHP idiom, it is not required by HTML and it's not used by other languages/frameworks. – Sergey Sep 11 '13 at 01:55
2

agreed with @Sergey. So a question still remains. "what is the language agnostic way of accessing the multiple selected values on server side?" – Ejaz Nov 01 '13 at 23:13
9

@Ejay: At the HTTP level, the client just sends multiple name/value pairs with the same name, you can observe this yourself if you use a form with `method="GET"`: `someurl?something=1&something=2&something=3`. The library/framework you're using just parses that string and presents it in some easy to use format. Apart from manually parsing the request there's no language/framework/library-agnostic way of accessing multiple values, because they all have different APIs. – Sergey Nov 05 '13 at 09:41
@Biotox has it nailed, always use a 'sample' form to post with a var_dump just to see what happens! – Adam Copley Feb 12 '16 at 12:28
Completely depends on the server-side. As Sergey said, the HTML form just posts multiple values with the same name. In MVC, your controller method's parameter with the same name could be either a string or a string array. If you make it a string, then it will convert the values into a comma separated list and pass that as the string. Meanwhile, if you simply change the parameter type from string to string[] without changing anything else, then MVC will pass the individual item strings instead of concatenating them into a single comma-separated string. – Triynko Feb 29 '16 at 02:09
For anyone using Rails, the convention is the same - just append [] to the HTML select name. So in HTML – wondersz1 Oct 22 '17 at 13:01
@Triynko what do you refer when you say MVC? The chosen/used MVC-framework or you mean that those conventions are defined in the MVC architectural pattern? (I ask because I couldn't find references to it and until now I thought that those were arbitrary convention invented for PHP) – Kamafeather Nov 07 '18 at 17:58
2

@rocketHazmat solution "name to end with []" worked for me (php environnement). Thanks ! – camille khalaghi Dec 12 '19 at 14:47

score 1 · Answer 2 · answered Sep 17 '18 at 17:41

try this : here select is your select element

let select = document.getElementsByClassName('lstSelected')[0],
    options = select.options,
    len = options.length,
    data='',
    i=0;
while (i<len){
    if (options[i].selected)
        data+= "&" + select.name + '=' + options[i].value;
    i++;
}
return data;

Data is in the form of query string i.e.name=value&name=anotherValue

Post values from a multiple select

2 Answers2

Linked