Как в Yii2 добиться отмены перезагрузки страницы после нажатия на инпут формы?

Question

<?php $form = ActiveForm::begin(['id' => 'test_form']) ?>
<?= $form->field($menu, 'name') ?>
<?= $form->field($menu, 'age') ?>
<?= Html::submitButton('Click me...', ['id' => 'btn']) ?>
<?php ActiveForm::end() ?>

let form = document.querySelector('#test_form');
const csrfToken = document.querySelector("[name='csrf-token']").content

form.addEventListener('submit', function(e) {
    e.preventDefault();

    let promise = fetch('/?r=post/show', {
        method: 'POST',
        body: new FormData(this),
        headers: {
            "X-CSRF-Token": csrfToken //  Set the token
        }
    });

    promise
        .then(
            data   => {return data.json()}
        )
        .then(
            result => {console.log(result)}
        )
});

На чистом php/js preventDefault работает, а здесь нет. Страница всё равно перезагружается, но ошибок нет, данные выводятся на долю секунды перед перезагрузкой в консоль (я их и вывожу в консоль) верные.

Answer 1

Ваш пример реализован таким образом в Yii2 https://www.yiiframework.com/doc/guide/2.0/en/input-form-javascript#submitting-the-form-via-ajax

    var $form = $('#formId');
    $form.on('beforeSubmit', function() {
        var data = $form.serialize();
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: data,
            success: function (data) {
                // Implement successful
            },
            error: function(jqXHR, errMsg) {
                alert(errMsg);
            }
         });
         return false; // prevent default submit
    });

БЛОГ НА HUSL

Как в Yii2 добиться отмены перезагрузки страницы после нажатия на инпут формы?

Ответы (1 шт):