I have more than one dropdown list which id is generated automatically by wbraganca Dynamic Form, for example: First-dropdown will have ID such as: #formquestion-0-formquestiontypeid , Second-dropdown will have ID such as: #formquestion-1-formquestiontypeid , n-dropdown will have ID such as: #formquestion-(n-1)-formquestiontypeid
I want to call ONCHANGE in every dropdown. But I don't know the ID, because the ID is generated automatically by wbraganca Dynamic Form.
$('#formquestion-{$i}-formquestiontypeid').change(function(){console.log('enter');});
I tried this jquery code inside the Dynamic form For Loop But the jquery ID only response to dropdown which has ID: #formquestion-0-formquestiontypeid
<?php
foreach ($formQuestionModels as $i => $formQuestionModel):
?>
<div class="item panel panel-default">
<!-- widgetBody -->
<div class="panel-heading">
<h3 class="panel-title pull-left">Question</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>
<?php
$Formquestiontype=Formquestiontype::find()->all();
$listData=ArrayHelper::map($Formquestiontype,'formQuestionTypeID','formQuestionTypeName');
echo $form->field($formQuestionModel, "[{$i}]formQuestionTypeID")->dropDownList(
$listData,
[
'class' => "",
'prompt' =>'Select...'
]);
$this->registerJs("
$('#formquestion-{$i}-formquestiontypeid').change(function(){
var value = this.value;
console.log(value);
});
");
?>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<?php
// necessary for update action.
if (!$formQuestionModel->isNewRecord) {
echo Html::activeHiddenInput($formQuestionModel, "[{$i}]id");
}
?>
<?= $form->field($formQuestionModel, "[{$i}]formQuestionName")->textInput(['maxlength' => true]) ?>
<div class="row">
<div class="col-sm-6">
<?= $form->field($formQuestionModel, "[{$i}]formDescription")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-6">
<?= $form->field($formQuestionModel, "[{$i}]formRequired")->textInput(['maxlength' => true]) ?>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-sm-4">
<!-- <?= $form->field($formQuestionModel, "[{$i}]formQuestionTypeID")->textInput(['maxlength' => true]) ?> -->
</div>
<div class="col-sm-4">
<?= $form->field($formQuestionModel, "[{$i}]formImage")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($formQuestionModel, "[{$i}]formQuestionPosition")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($formQuestionModel, "[{$i}]formQuestionSection")->textInput(['maxlength' => true]) ?>
</div>
</div>
<!-- .row -->
</div>
</div>
<?php endforeach; ?>
This question is solved, I just only need to insert all of my jquery inside this JQUERY code:
jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) {
jQuery(".dynamicform_wrapper .panel-title").each(function(index) {
// Insert your code (javascript, JQUERY, etc) here
});
});