I have a js-code that changes the following fields, depending on the previously selected field.

$('#types').on('change', function() { var selection = $(this).val(); $('div#values > div').hide(); $('#'+selection+' *').prop('disabled',false); $("#"+selection).show();

The identifier is #types . The problem is that I have a dynamic form. My first form comes with id="types" , and the following forms already go id="types"+1 , that is, types1,types2,... How can I specify in JS code that id changes? enter image description here

That's when 1 is open, then all the rules, but when I open 2, it no longer works .. enter image description here That is, as in php will be in this case - types[] And how will it be then in js ?? Or am I digging in the wrong direction?

Here is the whole code, if it will be so clear

  <?php DynamicFormWidget::begin([ 'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_] 'widgetBody' => '.container-items2', // required: css class selector 'widgetItem' => '.item2', // required: css class 'limit' => 10, // the maximum times, an element can be cloned (default 999) 'min' => 1, // 0 or 1 (default 1) 'insertButton' => '.add-item2', // css class 'deleteButton' => '.remove-item2', // css class 'model' => $clientObject[0], 'formId' => 'dynamic-form', 'formFields' => [ 'type_id', ], ]); $list = ArrayHelper::map(\common\models\objects\ObjectType::find() ->where(['not', ['parent_id' => NULL]])->all(), 'id', 'name'); ?> <div class="container-items2"><!-- widgetContainer --> <?php foreach ($clientObject as $i => $objects): ?> <div class="item2 panel panel-default"><!-- widgetBody --> <div class="panel-body"> <button type="button" class="add-item2 btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> <button type="button" class="remove-item2 btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> <?= $form->field($objects, "[{$i}]type_id")->dropDownList($list, ['id' => 'types'])->label(false) ?> <div id="values"> <div id="3" style="display:none;"> <?= $form->field($objects, "[{$i}]count_room")->textInput() ?> <?= $form->field($objects, "[{$i}]count_meter")->textInput() ?> <?= $form->field($objects, "[{$i}]is_repair")->checkbox() ?> <?= $form->field($objects, "[{$i}]is_new_building")->dropDownList([ 'Сдан' => 'Сдан', 'Не сдан' => 'Не сдан', 'Вторичный рынок' => 'Вторичный рынок', ]) ?> </div> <div id="4" style="display:none;"> <?= $form->field($objects, "[{$i}]count_meter")->textInput() ?> <?= $form->field($objects, "[{$i}]count_hundredth")->textInput() ?> <?= $form->field($objects, "[{$i}]is_repair")->checkbox() ?> </div> <div id="5" style="display:none;"> <?= $form->field($objects, "[{$i}]count_hundredth")->textInput() ?> </div> <div id="6" style="display:none;"> <?= $form->field($objects, "[{$i}]type")->textInput() ?> </div> <div id="7" style="display:none;"> <?= $form->field($objects, "[{$i}]count_room")->textInput() ?> </div> <div id="9" style="display:none;"> <?= $form->field($objects, "[{$i}]type")->textInput() ?> </div> </div> </div> </div> </div> <?php endforeach; ?> <?php DynamicFormWidget::end(); ?> <?php //script JS $script = <<< JS $('#types').on('change', function() { var selection = $(this).val(); $('div#values > div').hide(); $('#'+selection+' *').prop('disabled',false); $("#"+selection).show(); }); JS; $this->registerJs($script, View::POS_END); ?>
  • one
    add to the tag <form class="typesclass" ... , and in the code: $('.typesclass').on('change', function() { ... - Igor
  • Did not understand a little, just change the id on the class? So the result is the same. I think you need to somehow put a counter that would add +1 to the js code in the place where the identifier is $ ('# types') - Vlad Shkuta
  • look at the answer, maybe it’s clearer there - Igor

1 answer 1

Use the Attribute Starts with ... selector .

 $("[id^='types']").on('change', function() { ... }