Search code examples
jqueryyii2-basic-appdynamicform

How to use onchange when the Id is generated Dynamically using Dynamic Form YII2


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; ?>


Solution

  • 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
        });
    });