Get the value from all options (selected and not selected) in select multiple form in PHP

I need some help with my Select multiple form.

When clicking the submit button I want to submit all the values of the options. Selected and not selected options.

So if you take the code below as an example. I would like to get all the option values into an array without needing to select them in the Input.

<form action="/action_page.php">
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>


Result:

array( [0] => 'volvo', [1] => 'saab', [2] => 'opel', [3] => 'audi' );


This post does everything I want but it is done in Javascript: Get all options from Select box (selected and non selected). So if this can be done by using Javascript and PHP that would be great, but I have yet not found a solution for that.

Thanks for your help in Advance!

Sincerly, Ledung.

4 Answers
4

You can create, with javascript, an additional text input to store all option values:

var my_values = ;
var $select = $('select[name=the_select]');
$select.find('option').each(function() {
my_values.push($(this).val());
});
$new_input = $('<input type="text" name="all_options">'); // use 'type="hidden"' in production
$new_input.val(my_values.join(','));
$select.parent().append($new_input);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="the_select">
<option value="val0">value 0</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
</select>

The form will send the additional parameter named "all_options".

This PHP code will create the array:

$all_options = explode(",", $_GET['all_options']);

$all_options = explode(",", $_GET['all_options']);

You can add hidden input into your form which will contain all available options:

hidden

<form action="/action_page.php">
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="hidden" name="allCars">
<input id="submit" type="submit">
</form>


and now you can do something like this:

<script type="text/javascript">
document.getElementById('submit').addEventListener('click', () => {
// All available options from cars select.
const options = document.getElementsByName('cars')[0].options;
// Array with all available cars.
const allCars = ;
for (let i = 0; i < options.length; i++) {
allCars.push(options[i].value);
}
// Assign cars to hidden input.
document.getElementsByName('allCars')[0].value = allCars;
});
</script>


In case this is not final answer - hope you'll get the main idea of this approach.

$.map is probably the most efficient way to do this using jquery.

var options = $('#selectData option');
var values = $.map(options ,function(option) {
return option.value;
});
console.log(values) //=> all values

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectData" id="selectData">
<option value="val0">value 0</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
</select>

Do you mean this way?

You can structure you data this way.

But when submit, you should use ajax post or create a new form instead of using the old one form submit.

$('#form').submit(function(event){
var arr=;
$('option').each(function(){
arr.push({
selected: $(this).is(':selected'),
value: $(this).val()
})
})
console.log(arr);
// do ajax form post and redirect
// or build a new form with data strcture above
return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="/action_page.php">
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.