YII2: identical elements in different activeform forms and their IDs

Question

I am building a project with YII2(a dating site). I have several "form models", i mean models that are used to create forms with activeform. In some forms/models i have identical fields, for example "gender" and "location" fields present in "registration" page and in "profile" page. Only some fields are identical, others are different so i can't use the same model for different pages/forms.

Now, the problem is that when i use different models for creating activerecord forms the IDs and CSS classes for the fields are also different.

For example, i have a model called 'SignupForm' and a model called 'EditProfileForm'. In view(template) i have a code like that

<?php $form = ActiveForm::begin(['id' => 'form']); ?>
<?= $form->field($model, 'test_field') ?>
<?php ActiveForm::end(); ?>

If i execute this code for different models i get different fields names(IDs): "editprofileform-test_field" ID for "EditProfileForm" model and "signupform-test_field" ID for "SignupForm" model.

Why does it metter? Because i want to apply the same CSS styles and JavaScript handlers for identical elements. Is there a way to make IDs and CSS classes the same for activeforms generated using different models?

EDITED

One solution(posted by @marche) is to add ID parameter to text field

<?php $form = ActiveForm::begin(['id' => 'form']); ?>
<?= $form->field($model, 'test_field')->textInput([
    'class' => 'some-css-class',
    'id' => 'my-id',
]) ?>
<?php ActiveForm::end(); ?>

It works for text inputs but i also have AutoComplete widget

<?= $form->field($model, 'city')->widget(\yii\jui\AutoComplete::classname(), [

    'clientOptions' =>[
        'source' => new JsExpression("function( request, response ) {
          $.getJSON('/my-script?country='+country_id, {
            term: request.term 
          }, response );
        }
    ")
    ],
],['id'=>'my-test-id']) ?>

As you see i tried adding ID parameters to AutoComplete and it doesn't work. Please advise me how to assign ID parameter to AutoComplete widget.

marche marche · Accepted Answer · 2017-02-17T22:51:17

You can add a class to each field or specify their id>

<?php $form = ActiveForm::begin(['id' => 'form']); ?>
<?= $form->field($model, 'test_field')->textInput([
    'class' => 'some-css-class',
    'id' => 'my-id',
]) ?>
<?php ActiveForm::end(); ?>

If you add the class, then you can reuse them later on or use them when you want to use the same styles with 2+ elements. Otherwise, you define the id, so the framework will not auto-generate it.

Edit

For widgets you need to add the id or class inside options like the following:

<?= $form->field($model, 'city')->widget(\yii\jui\AutoComplete::classname(), [
    'options' => [
        'id' => 'my-test-id',
        'class' => 'my-css-class',
    ],
    'clientOptions' => [
        'source' => new JsExpression("function( request, response ) {
            $.getJSON('/my-script?country='+country_id, {
                term: request.term 
            }, response );
        }
    ")
    ],
]) ?>

YII2: identical elements in different activeform forms and their IDs

2 Answers