cakephp button add more / less fields

Hello I am trying to make a button that would allow me to add 2 additional fields to my form: 1 text type fields and 1 multiple choice selector (see image)

fields

I would like to be able to add these 2 fields as many times and save it in the database here is what the code of these 2 fields looks like:

<div class="zone_prestations">
            <div class="form-group">
                <?php
                echo $this->Form->label(
                        'Prestation.zone',
                        'Zone',
                        'col-sm-2 control-label'
                );
                echo $this->Form->input('Prestation.zone',
                                        array('div' =>
                                                      array(
                                                              'class' => 'col-sm-10'
                                                      ),
                                              'class' => 'form-control'
                                        ));
                ?>
            </div>
            <div class="form-group">
                <?php

                echo $this->Form->label(
                        'Prestation.id_contract',
                        'Préstation',
                        'col-sm-2 control-label'
                );
                echo $this->Form->input(
                        'Prestation.id_prestation',
                        array(
                                'type' => 'select',
                                'options' => $prestations,
                                'empty' => 'Selectionnez les préstations',
                                'div' => array('class' => 'col-sm-10'),
                                'class' => 'form-control search-select',
                                'multiple' => true,
                                'value' => $selected,
                                'id' => 'prestation_selector'
                        )
                );
                ?>
            </div>
        </div>

Do you know how I could do this knowing that I have a multiple choice field. Thank you for your help

Update 20/02/21

<script type="text/javascript">
$(document).ready(function() {
    $("select").select2({ width: '100%' });
});

$(document).ready(function () {
    var maxField = 10;
    var addButton = $('#add_button');
    var wrapper = $('#prestation_select');
    var x = 1;
    var fieldHTML = '<div class="form-group">';
    fieldHTML += <?php echo $this->Form->label(
                    'Prestation.' + x + '.zone',
                    'Zone',
                    'col-sm-2 control-label'
            );
            echo $this->Form->input('Prestation.' + x + '.zone',
                                    array('div' =>
                                                  array(
                                                          'class' => 'col-sm-10'
                                                  ),
                                          'class' => 'form-control'
                                    ));
            ?>
    fieldHTML +='</div>';

    $(addButton).click(function () {
        if (x < maxField) {
            x++;
            $(wrapper).append(fieldHTML);
        }

        $("select").select2({ width: '100%' });
    });

    $(wrapper).on('click', '.remove_button', function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
});

Answer

Your code for generating fieldHTML is run once when your page loads, with the current version of x. Every time you click your add button, you’ll be getting exactly that, always with “1” in it; it’s not re-evaluated with the new x. Solution should be simple, just move the calculation of that HTML inside the add function.

On a separate note, don’t decrement x when you click the remove button. If you start with field 1, then add 2 and 3 and 4, then remove 2, x decrementing x will mean that adding another field will give you a duplicate of 4. There’s no need for them to be sequential, you just need distinct numbers in there.

Advertisement

Answer