Реализовать ajax форму с помощью ActiveForm в Yii2

Саму форму необходимо обернуть в ActiveForm:

$form = ActiveForm::begin([
        'id' => 'form',
        'enableClientValidation' => true,
        'enableAjaxValidation'   => false,
        'method' => 'post',
    ]);
    // сама форма, инпуты, селекты и т.д...
    ...
ActiveForm::end();

Также необходимо написать небольшой кусок кода в виде jquery функции:

$(document).on("beforeSubmit", "#form", function (e) {
    var form = $(this);
    var formData = form.serialize();
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: formData,
        success: function (response) {
            alert(response.message)
        },
        error: function () {
            // действие на случай ошибки
        }
    });

}).on('submit', function(e){
    e.preventDefault();
});

UPD
Если в форме есть input[type=file], т. е. в форме должны передаваться файлы, тогда добавим глобальную функцию для сериализации всех полей формы, в том числе и приложенных файлов.

(function($) {
    // сериализация данных формы с учетом передачи файлов
    $.fn.serializefiles = function() {
        var obj = $(this);
        var formData = new FormData();
        $.each($(obj).find("input[type='file']"), function(i, tag) {
            $.each($(tag)[0].files, function(i, file) {
                formData.append(tag.name, file);
            });
        });
        var params = $(obj).serializeArray();
        $.each(params, function (i, val) {
            formData.append(val.name, val.value);
        });
        return formData;
    };
})(jQuery);

И соответственно, новый метод $.ajax будет выглядеть так:

$(document).on("beforeSubmit", "#form", function (e) {
    var form = $(this);
    // вот здесь собираем поля формы
    var formData = form.serializefiles();
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: formData,
        success: function (response) {
            alert(response.message)
        },
        error: function () {
            // действие на случай ошибки
        }
    });

}).on('submit', function(e){
    e.preventDefault();
});
Поделиться
Отправить
2017   activeform   ajax   jquery   yii2
Популярное