Split ActiveForm fields into different tabs with Tabs widget

Question

I'm creating a form view and I want to organize the form fields with tabs structure, using the official Tabs widget.

Is it possible init the Tabs widget with the id (or class) of the div elements that contains the active form fields?

your question is unclear and ambiguous, pleas explain in detail what exactly you want to do — deacs, Feb 02 '15 at 13:34
Hi, I need to create a tabs widget but I need to init the content of each tabs with a div in the view. — AleCat83, Feb 02 '15 at 13:47
Why not have the form wrap around the tabs and you can just submit the entire thing. If you need validation for each tab then you can use scenarios to validate the same model on each post of the form. — Mihai P., Feb 02 '15 at 23:17
Hi, it seems ok, but how can I insert a TabsWidget wrapepd around the form? — AleCat83, Feb 04 '15 at 13:14

score 6 · Answer 1 · answered Mar 16 '15 at 20:55

One example of how you can manage it is doing like this:

First, divide your contact-form into one view-file for each tab.
Place the ActiveForm::begin() and ActiveForm::end() around the Tabs::widget()
Render the contact-form pages into content, with parameters $model and $form

Example code:

views/site/contact.php

<?php

/* @var $this yii\web\View */
$this->title = 'Contact';

use yii\bootstrap\Tabs;
use yii\bootstrap\ActiveForm;
?>


<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
<?= Tabs::widget([
        'items' => [
            [
                'label' => 'One',
                'content' => $this->render('contact_form1', ['model' => $model, 'form' => $form]),
                'active' => true
            ],
            [
                'label' => 'Two',
                'content' => $this->render('contact_form2', ['model' => $model, 'form' => $form]),
            ],
        ]]);
 ?>
    <?php ActiveForm::end(); ?>

views/site/contact_form1.php

<?= $form->field($model, 'name') ?>
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'subject') ?>

views/site/contact_form2.php

<?php
use yii\helpers\Html;
use yii\captcha\Captcha;
?>

<?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
    'template' => '<div class="row"><div class="col-lg-3">{image}</div><div    class="col-lg-6">{input}</div></div>',
]) ?>
<div class="form-group">
<?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?>
</div>

Hope this helps!

Im getting an error As undefined variable form in render file.. can you solve this? — Salman Riyaz, Jul 25 '16 at 12:56

score 0 · Answer 2 · answered Nov 14 '16 at 16:19

0

Just add at the top of your contact.php global $form; and all works fine.

answered Nov 14 '16 at 16:19

Vaso Zonjic

1

score 0 · Answer 3 · answered May 26 '17 at 10:17

I have another solution:

When we call $form->field($model, 'name')->textInput(), it will return the model of class yii\widgets\ActiveField, so just continue calling a method of this class as $form->field($model, 'name')->textInput()->render(). It will return a string then you can use it for the tab's content. I have an example code in my application for translating multi languages as the following code:

<?php
$items = [];
foreach ($translateModels as $translateModel) {
    $tabContent = $form->field($translateModel, "[{$translateModel->code}]name")->textInput()->render();
    $items[] = [
        'label' => $translateModel->language->name,
        'content' => $tabContent,
    ];
}
?>
<?= Tabs::widget([
    'options' => [
        'class' => 'nav-tabs',
        'style' => 'margin-bottom: 15px',
    ],
    'items' => $items,
]) ?>

Maybe it's help.

Split ActiveForm fields into different tabs with Tabs widget

3 Answers3

Linked