Edit select dropdown field in a Matrix on the front-end

Question

Having a front-end user form where users can maintain there profile. I managed to get the single text and date field in the Matrix to be edited from the front-end but having issues with the select dropdown fields in the form.

The select dropdown is build up correctly but selected values won't save, in fact the existing value is cleared after submitting the form.

<form method="post" accept-charset="UTF-8">
    {{ getCsrfInput() }}
    <input type="hidden" name="action" value="users/saveUser">
    <input type="hidden" name="redirect" value="mijnduikteam/gegevens/{{ currentUser.username }}">
    <input type="hidden" name="userId" value="{{ currentUser.id }}">

    <input type="hidden" name="fields[userDivingCertification]" value=""

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th style="width: 20%;">Type</th>
                        <th style="width: 15%;">Certificaat #</th>
                        <th style="width: 20%;">Datum</th
                    </tr>
                </thead>
                <tbody>
                    {% for block in currentUser.userDivingCertification.order('certificateDate desc') %}
                    <input type="hidden" name="fields[userDivingCertification][ {{ block.id }}][type]" value="certifications">
                    <input type="hidden" name="fields[userDivingCertification][ {{ block.id }}][enabled]" value="1">

                        <tr>
                            <td>
                                <select class="form-control" type="text" name="fields[userDivingCertification][ {{ block.id }}][fields][certificateType][]">
                                {% for option in block.certificateType.options %}
                                <option {% if option.selected %}selected="selected"{% endif %} value="{{ option.value }}">{{ option.label }}</option>
                                {% endfor %}
                                </select>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="fields[userDivingCertification][ {{ block.id }}][fields][certificateNumber]" value="{{ block.certificateNumber }}" >
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control" type="text" id="datetimepickerCertificate" name="fields[userDivingCertification][ {{ block.id }}][fields][certificateDate][date]" value="{{ block.certificateDate| date('d-m-Y') }}" aria-describedby="basic-addon4" >
                                <span class="input-group-addon" id="basic-addon4"><i class="fa fa-calendar"></i></span>
                                </div>
                            </td>
                         </tr>
                     {% endfor %}
                 </tbody>
             </table>
        </div>
        <div class="form-group" style="margin-top: 80px;">
                <input role="button" class="btn btn-primary" type="submit" value="Wijziging bewaren">
        </div>
    </form>

Answer 1

I was struggling with the same issue. Using your code I was able to get the select box to update by removing the [] at the end of your select name variable.

So this code wasn't working

<select class="form-control" type="text" name="fields[userDivingCertification][ {{ block.id }}][fields][certificateType][]">

but changing to

<select class="form-control" type="text" name="fields[userDivingCertification][ {{ block.id }}][fields][certificateType]">

got it submitting correctly.

The other issue I was having with the data being wiped completely was due to the hidden type field not having the correct value. I had copied some code from elsewhere and forgot to change the value. Once I got it matching my Matrix Block Type handle it worked fine.