How to get all the values from a HTML select element in php?

Question

I have a HTML form with two select elements(listboxes) and two buttons to move the data from one listbox to another(using JavaScript):

 <form action="page.php" method="post">
        <select name="select1" multiple="yes">
            <option value="1">Left1</option>
            <option value="2">Left2</option>
            <option value="3">Left3</option>
        </select>
        <input type="button" value="--&gt;" onclick="moveOptions(this.form.select1, this.form.select2);" /><br />
        <input type="button" value="&lt;--" onclick="moveOptions(this.form.select2, this.form.select1);" />
        <select name="select2" multiple="yes">
            <option value="4">Right1</option>
            <option value="5">Right2</option>
        </select>
        <input type="submit" name="submit" value="Submit">
</form>

When I hit the Submit button I want to get all the values stored in the listboxes.

foreach ($_POST['select1'] as $value)
    {
        //save data to database
    }

This just gets one selected value(if there was one).

I managed to get multiple values (if they are selected) by putting a [] after the name of the select.

<select name="select1[]" multiple="yes">

But this still doesn't gets the unselected values, and this way the data moving JavaScript function doesn't works either.

are you trying to get the unselected values among with the selected ones to save them in the database and assign which was selected or not? if so you are doing it wrong — Mohd Moe, Nov 11 '12 at 05:03
nope. What I'm trying to do is: there are the tow select elements, you can move the data from one to the other, and when you hit the submit button, I want to save which value in wich select listbox was in. — Istvan Szasz, Nov 11 '12 at 13:15

score 4 · Answer 1 · answered Nov 11 '12 at 04:00

4

Before the form is submitted just select all the options:

document.getElementsByName('submit')[0].onclick = function () {
    var s1 = document.getElementsByName('select1')[0];
    for(var i=0; i < s1.options.length; i++){
        s1.options[i].selected = true;
    }
};

answered Nov 11 '12 at 04:00

PieSub

318
1
8

Yeah, that could work. The only problem is I still couldn't move the elements from on select to another, because the `moveOptions` function doesn't works if I put the `[]` after the name of the select. – Istvan Szasz Nov 11 '12 at 13:13
You can select form elements with brackets in them by using the following: `moveOptions(this.form.elements['select1[]'], this.form.select2);` Or just switch the selection over to getElementsByName: `moveOptions(document.getElementsByName('select1[]')[0], this.form.select2);` – PieSub Nov 11 '12 at 22:03

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

var select1 = document.getElementById('select1');
var values = new Array();

for(var i=0; i < select1.options.length; i++){
    values.push(select1.options[i].value);
}

To pass the array from page to page, go here

edited May 23 '17 at 12:23

Community

1
1

answered Nov 11 '12 at 03:47

rharrison33

1,252
4
18
34

score 1 · Answer 3 · answered Nov 11 '12 at 03:51

I am not sure why you want to do this but you can call this Jquery code before submitting the form and add the array value to a hidden input to get to be posted

$("#Submit_button").click ( function() {
        var arr = new Array;
        $("#select1 option").each ( function() {
            arr.push ( $(this).val() );
        });
        $(#hidden_input).val(arr);
    });

How to get all the values from a HTML select element in php?

3 Answers3