Yii2双ActiveForm需二次点击提交的问题排查求助

I’ve run into similar headaches when working with multiple forms in a single Pjax container—let’s break down why this is happening and walk through actionable fixes step by step.

What’s Causing the Double-Click Problem? #

1. Pjax Event Interception: Your first form (complaints) has data-pjax=1, which tells Pjax to hijack its submit for AJAX updates. Since both forms are wrapped in the same Pjax container, Pjax accidentally intercepts the second form’s submit too. The first click gets swallowed by Pjax’s logic, and only the second click triggers the actual form submission.
2. Broken Event Binding: Your custom click handler for #submit_with_answer is bound on window.onload. When Pjax refreshes the container, it replaces the original DOM elements—so this handler stops working on new elements, leaving the first click unresponsive.
3. Conflicting Submit Logic: Manually calling $('#complaint_feedback').submit() clashes with Pjax’s default submit handling, especially when both forms share the same container.

Solutions to Try #

1. Separate Forms Into Independent Pjax Containers #

The cleanest fix is to wrap only the parts that need Pjax updates in their own containers, so forms don’t interfere with each other:

<!-- Search Form with Pjax -->
<?php Pjax::begin(['id' => 'search-form-pjax', 'timeout' => 50000]);?>
<?php echo $this->render('_show', [
    "model" => $searchModel,
    "filials" => $filials,
    "workers" => $workers,
    "posts" => $posts,
]);?>
<?php Pjax::end();?>

<!-- Handle Form (no Pjax needed here) -->
<?php echo $this->render('_handle_form');?>

<!-- GridView with Pjax -->
<?php Pjax::begin(['id' => 'workers-grid-pjax', 'timeout' => 50000]);?>
<div class="row js-loader">
    <div class="col-lg-12 col-md-12">
        <div class="table-responsive">
            <?=GridView::widget([
                'dataProvider' => $dataProvider,
                'emptyText' => 'Нет результатов',
                'tableOptions' => ['class' => 'table table-hover table-claim table-claimadm', 'style' => 'font-weight:600;'],
                'rowOptions' => ['class'=>'row-without-border row-open'],
                'layout' => "{items}{pager}",
                'columns' => [
                    // Your column configuration here
                ]]);?>
        </div>
    </div>
</div>
<?php Pjax::end();?>

This isolates each Pjax-managed section, eliminating cross-form submission conflicts.

2. Tell Pjax to Ignore the Second Form #

If you want to keep both forms in the same Pjax container, add data-pjax="0" to the second form’s options to prevent Pjax from intercepting its submissions:
In _handle_form.php:

<?php $form = ActiveForm::begin([
    'id' => 'complaint_feedback',
    'action' => Url::to(['complaints/handle-complaint']),
    'method' => 'POST',
    'options' => [
        'class' => 'form-respons form-claim-feedback',
        'style'=>'display:none;',
        'data-pjax' => 0, // Explicitly exclude this form from Pjax handling
    ],
]); ?>

3. Fix Event Binding for Pjax Updates #

Since Pjax replaces DOM elements, your window.onload-bound handlers won’t work after a refresh. Use event delegation instead, which works for both existing and future elements:
Update your script:

// Use event delegation for the submit button
$(document).on('click', '#submit_with_answer', function() {
    const textVal = $.trim($('#text-claim').val());
    if (textVal.length > 0) {
        $('#complaint_feedback').submit();
    } else {
        $('#textarea-group').addClass('has-error');
        $('#answer_error').html('Заполните поле «Добавить текст ответа»');
    }
});

// Pjax loader logic with proper event handling
$(document).on('pjax:send', function (event) {
    const tbody = $('#' + event.target.id).find(".js-loader");
    if (tbody.length) {
        const tbodyHeight = tbody.height();
        tbody.html('<div class="block-loader" style="width:100%"></div>');
    }
});

4. Use Yii2 ActiveForm’s Native Submit Method #

Instead of manually calling submit(), use Yii2’s built-in form submission method to avoid conflicts:

$(document).on('click', '#submit_with_answer', function() {
    const form = $('#complaint_feedback');
    const textVal = $.trim($('#text-claim').val());
    
    if (textVal.length > 0) {
        // Use ActiveForm's native submit method
        form.yiiActiveForm('submitForm');
    } else {
        $('#textarea-group').addClass('has-error');
        $('#answer_error').html('Заполните поле «Добавить текст ответа»');
    }
});

Testing Tips #

Start with solution 2—it’s the quickest to implement. If that doesn’t fix it, move to solution 3 to repair event binding. If you still have issues, solution 1 will fully isolate your forms and eliminate all conflicts.

内容的提问来源于stack exchange，提问作者Baurzhan