October CMS create a multi select Form field

Question

I need to create a multi select form field in October Cms backend form (fields.yaml). I applied the following method

select_field:
     label: Sample
     type: dropdown
     attributes: {multiple:'multiple'}

Options to this field will be invoked from the model

Everything is working good but when i submit the form only the first selected option is being inserted as JSON data in the database table text field. I want every selected option to be stored. I have also declared the field as Jsonable in model ie., protected $jsonable = ['field_name'];

Note : When I use type as checkboxlist it is working as I thought but I don't want it to be checkboxlist. I'm new to October cms is there any easy way..

Greg Bee Greg Bee · Accepted Answer · 2016-03-04T01:13:50

you can't use a dropdown field with mutiple value because it was made to handle single value. as the checkbox and radio this is why there are checkboxList(i guess).

But i found a solution. Use a partial as field type in fields.yaml instead of dropdown

https://octobercms.com/docs/backend/forms#field-partial

Create a partial with the content below (notice the [] in name attribute this is why it work !)

But be aware that this is just a trick and you can only use direct yaml options assignment https://octobercms.com/docs/backend/forms#field-dropdown

<?php
    $fieldOptions = $field->options();
    //get the field value as an array
    $selectedValues = (array)$field->value;

?>
<!-- Dropdown -->
<?php if ($this->previewMode): ?>
    <div class="form-control"><?= (isset($fieldOptions[$field->value])) ? e(trans($fieldOptions[$field->value])) : '' ?></div>
<?php else: ?>

    <select
        id="<?= $field->getId() ?>"
        name="<?= $field->getName() ?>[]"
        class="form-control custom-select"
        <?= $field->getAttributes() ?>>
        <?php if ($field->placeholder): ?>
            <option value=""><?= e(trans($field->placeholder)) ?></option>
        <?php endif ?>
        <?php foreach ($fieldOptions as $value => $option): ?>
            <?php
                if (!is_array($option)) $option = [$option];
            ?>
            <option

                <?= in_array($value, $selectedValues)  ? 'selected="selected"' : '' ?>
                <?php if (isset($option[1])): ?>data-<?=strpos($option[1],'.')?'image':'icon'?>="<?= $option[1] ?>"<?php endif ?>
                value="<?= $value ?>">
                    <?= e(trans($option[0])) ?>
            </option>
        <?php endforeach ?>
    </select>
<?php endif?>

And for the yaml

```
select_field:
    label: Sample
    type: partial
    path:$/author/plugin/models/classfolder/_my_partial.htm
    attributes: {multiple:'multiple'}
    options:
        key:value
        key:value
```

A better approche would be may be to build a widget or make a pull request if you have the ability you can touch the core and add

the same content in \modules\backend\widgets\form\partials with name _field_dropdownlist.htm

then in \modules\backend\widgets\form\Form.php line 630 change :

$optionModelTypes = ['dropdown', 'radio', 'checkboxlist', 'balloon-selector'];

to add your partial name without _field or .htm ex _field_dropdownlist.htm become dropdowList

$optionModelTypes = ['dropdown', 'radio', 'checkboxlist', 'balloon-selector','dropdowlist'];

now in your yaml file juste use type:dropdownList and it will work.

October CMS create a multi select Form field

5 Answers