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

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

Слайдер

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

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

Форма 1

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

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

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

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

Форма 2

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

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

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

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

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

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

<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>