Промежуточная отправка формы

Инструкция о том, как организовать промежуточную отправку данных с первого шага пошаговой формы.

Вкладки

Хитрость в том, что вместо одной пошаговой формы, мы будем использовать 2 формы, размещенные в скрытых вкладках. Эти формы могут быть пошаговыми, а могут быть простыми.

Вкладки должен быть с отключенными жестами, и без элементов управления. Мы подготовили такие, их нужно импортировать по номеру 23 в редакторе.

Форма 1

В первую вкладку нужно вставить форму, которая будет выдавать себя за первый шаг пошаговой формы (но фактически это обычная форма).

В исходном коде этой первой формы, во вкладке «JS» нужно добавить следующий код:

page.getComponent(el).on('submit', function (event) {
var $parentTabs = $(el).parent().closest('.cr-tabs');
if ($parentTabs.length) {
page.getComponent($parentTabs[0]).slideNext();
}
});

В «Действии после отправки» нужно указать «Выполнение JavaScript кода», а поле с кодом очистить.

Форма 2

Во вторую вкладку нужно вставить еще одну форму, и она уже будет «завершающей». К ней никаких требований нет, и исходный код редактировать тоже не нужно.

Форма 3, 4 и т.д.

На самом деле во вкладке можно добавить больше вкладок с формами, каждая из которых будет отправлена, после чего показана следующая.

Для этого все формы во вкладках, кроме последней, нужно настроить как Форму 1.

Передача полей

Чтобы поля из первой формы передавались во вторую, нужно в конец BODY страницы добавить еще один кусок кода:

<script>
cr.api(function (page) {
// Тут будем сохранять все отправленные поля
var fieldStorage = [];
// Как только видим на странице форму
page.lazy('.cr-form', function (el) {
var form = page.getComponent(el);
// Начинаем ловить событие отправки формы
form.on('before-submit', function (event) {
// Когда поймали, добавляем ранее отправленные поля
fieldStorage.forEach(function (field) {
event.fields.push({
name: field.name,
value: field.value,
uid: field.uid,
});
});
});
// Когда форма уже отправлена
form.on('submit', function (event) {
// Запоминаем поля для следующей отправки
form.fields.forEach(function (field) {
fieldStorage.push({
name: field.name,
value: field.value,
uid: field.uid,
});
});
});
});
});
</script>