Yii2 - checkbox change commit ActiveForm

Question

in the index.php there is a checkbox within a active form

<div class="form-group pull-right" style="margin-right: 10px">
    <?php Pjax::begin(['id' => 'options']); ?>
    <?php $form = ActiveForm::begin(['method' => 'get', 'action' => ['ensemble/index'], 'options' => ['data-pjax' => true]]); ?>

    <?= $form->field($searchModel, 'completed')->checkbox(); ?>
    <?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>

    <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>
</div>

also there is kartik gridview in the index.php

<?= GridView::widget($gridConfig); ?>

with the following configuration

$gridConfig['pjax'] = true;
$gridConfig['pjaxSettings'] = ['options' => ['id' => 'pjaxGrid']];

the ensemble controller with the index action looks like this

public function actionIndex()
{
    $searchModel = new EnsembleSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    return $this->render('index', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
    ]);
}

This does work every thing just fine. I can check / uncheck the checkbox field and hit the submit button; which then reloads the gridview. Just cool.

Now i was wondering if it is possible, to just make this with only by clicking the checkbox? So if i check / uncheck the checkbox the gridview will be reloaded (pjax'd).

cheers, Luc

score 2 · Accepted Answer · answered Nov 21 '17 at 04:35

Assign id to your form as well as class to your checkbox.

<div class="form-group pull-right" style="margin-right: 10px">
    <?php Pjax::begin(['id' => 'options']); ?>
    <?php $form = ActiveForm::begin([
            'id' => 'filter-form', 
            'method' => 'get', 
            'action' => ['ensemble/index'], 
            'options' => ['data-pjax' => true]
        ]); ?>
    <?= $form->field($searchModel, 'completed',['class'=>'status_chk'])->checkbox(); ?>
    <?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
    <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>
</div>

Add this script to your index.php file.

<?php
$this->registerJs(
   '$("document").ready(function(){ 
        $(document).on("change",".status_chk", function() {
            $("#filter-form").submit();
        });
    });'
);
?>

score 0 · Answer 2 · answered Nov 20 '17 at 21:54

I would say that you could do that with JavaScript. You could do something like this:

You must know how to identify the Form and the Checkbox (you could assign them so ids..)
In a JavaScript you could do something like this:

var form = document.getElementById("form-id");

document.getElementById("your-checkbox-id").addEventListener("click", function () { form.submit(); });

As explain in this answer: submit form with javaScript

Yii2 - checkbox change commit ActiveForm

2 Answers2