Yii2 Dynamic form wbraganca copy value to cloned f

Question

This question already has an answer here:

• wbraganca/yii2-dynamicform values copied to cloned field on edit, but not on create 1 answer

I am using wbraganca dynamic form in my Yii2 project, where I want to copy the values entered in the first set of fields to the set of fields in the cloned div.

What I understand, that jQuery copies the values to the cloned field by default. When going through the dynamicform.js of the extension, I find code which I think overrides the default functionality that is not allowing the values to be copied over to the cloned field.

The relevant code responsible for the same is like this:

$template.find('input, textarea, select').each(function() {
if ($(this).is(':checkbox') || $(this).is(':radio')) {

...
 $(this).prop('checked', false);
            } else if($(this).is('select')) {
                $(this).find('option:selected').removeAttr("selected");
            } else {
                $(this).val(''); 
            }
});

....

Now my question is how I can copy the value of first set of fields to the cloned fields. for example my field is like:

<?= $form->field($modelCustomBreakTime, 
"[{$i}]days")->dropDownList(['select',$days]) ?> //where $days are days of week

so basically what I want is when I select Monday, the copied value should be Monday.

Update: _form.php contents

<?php

use app\models\User;
use yii\bootstrap\ActiveForm;
use yii\helpers\ArrayHelper;
use yii\helpers\Html;
use kartik\time\TimePicker;
use wbraganca\dynamicform\DynamicFormWidget;
$instructor_id=htmlspecialchars($_GET["id"]);
$instructor_array = ArrayHelper::map(User::find()->where(['user_role' => 'instructor'])->andwhere(['status' => 10])->all(), 'id', function ($model) {
    return $model['first_name'] . ' ' . $model['last_name'];

})

/* @var $this yii\web\View */
/* @var $model app\modules\admin\models\CustomBreakTime */
/* @var $form yii\widgets\ActiveForm */
?>
<?php 
//$instructor_id=htmlspecialchars($_GET["id"]);
       // var_dump($id);

?>

    <div class="customer-form">

    <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); 
        $days = ['Monday' => Yii::t('app', 'Monday'),
    'Tuesday' => Yii::t('app', 'Tuesday'),
    'Wednesday' => Yii::t('app', 'Wednesday'),
    'Thursday' => Yii::t('app', 'Thursday'),
    'Friday' => Yii::t('app', 'Friday'),
    'Saturday' => Yii::t('app', 'Saturday'),
    'Sunday' => Yii::t('app', 'Sunday'),
]; ?>
    <div class="row"> 


    <div class="panel panel-default">
        <div class="panel-heading"><h4></i> Break Times</h4></div>
        <div class="panel-body">
             <?php DynamicFormWidget::begin([
                'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                'widgetBody' => '.container-items', // required: css class selector
                'widgetItem' => '.item', // required: css class
                'limit' => 10, // the maximum times, an element can be cloned (default 999)
                'min' => 1, // 0 or 1 (default 1)
                'insertButton' => '.add-item', // css class
                'deleteButton' => '.remove-item', // css class
                'model' => $modelsCustomBreakTime[0],
                'formId' => 'dynamic-form',
                'formFields' => [
                    'days',
                    'start_time',
                    'end_time',

                ],
            ]); ?>

            <div class="container-items"><!-- widgetContainer -->
            <?php foreach ($modelsCustomBreakTime as $i => $modelCustomBreakTime): ?>
                <div class="item panel panel-default"><!-- widgetBody -->
                    <div class="panel-heading">
                        <h3 class="panel-title pull-left">CustomBreakTime</h3>
                        <div class="pull-right">
                            <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                            <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">

                        <div class="col-sm-6">
                        <?=$form->field($modelInstructor, 'id')->dropDownList($instructor_array, ['options' => [$_GET['id'] => ['Selected'=>'selected'],'prompt' => 'Select Instructor']])?>
                        </div>
                        <?php
                            // necessary for update action.
                            if (! $modelCustomBreakTime->isNewRecord) {
                                echo Html::activeHiddenInput($modelCustomBreakTime, "[{$i}]id");
                            }

                        ?>
                        <div class="row">

                            <div class="col-sm-4">
                                <?= $form->field($modelCustomBreakTime, "[{$i}]days")->dropDownList(['select',$days]) ?>
                            </div>

                            <div class="col-sm-4">
                                <?= $form->field($modelCustomBreakTime, "[{$i}]start_time",['enableLabel' => false])->widget(TimePicker::classname(), ['pluginOptions' => [
                            'minuteStep' => 15,
                            'showMeridian' => false,
                            'defaultTime' => date('H:i', strtotime('11.00')), ],
                    ]) ?>
                            </div>


                            <div class="col-sm-4">
                                <?= $form->field($modelCustomBreakTime, "[{$i}]end_time",['enableLabel' => false])->widget(TimePicker::classname(), ['pluginOptions' => [
                            'minuteStep' => 15,
                            'showMeridian' => false,
                            'defaultTime' => date('H:i', strtotime('11.00')), ],
                    ]) ?>
                            </div>

                        </div><!-- .row -->
                    </div>
                </div>
            <?php endforeach; ?>
            </div>
            <?php DynamicFormWidget::end(); ?>
        </div>
    </div>

    <div class="form-group">
        <?= Html::submitButton($modelCustomBreakTime->isNewRecord ? 'Create' : 'Update', ['class' => 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

Answer 1

If you are looking into the js file then you might have overlooked the events section for dynamicform.js line 26

var events = {
    beforeInsert : 'beforeInsert',
    afterInsert : 'afterInsert',
    beforeDelete : 'beforeDelete',
    afterDelete : 'afterDelete',
    limitReached : 'limitReached'
};

But you can use these events only if you are not using nested forms. You can bind afterInsert event like below

$('.dynamicform_wrapper').on('afterInsert', function (e, item) {
  //code to copy values from the desired row/field set
});

dynamicform_wrapper is the value of widgetContainer widget property.

For the Nested forms, there isn't any support provided yet officially, although you can write your own script for that like using Mutation Observers to trigger a js function whenever an element is inserted or deleted.

Here is a good article with a working example.