Мультиформа с отдельными шагами-формами. Создание формы в виде мастера на сайте
Форма состоит из нескольких форм, каждая из форм загружается в некий контейнер.
Плюс подобного подхода (по сравнению с мастером) в том, что шаги-формы инициализируются независимо от других форм, т.к. при клике на кнопку шага, происходит полная инициализация шага.
Также сохранение данных каждого шага происходит сразу после нажатия кнопки Сохранить (и не зависит от других шагов).
Каждая форма может иметь кастомную разметку и свои особенности сохранения и проверки полей.
В примере подключен коллбек форм для автоматического перехода на следующий шаг:
as.formcallbacks["watch_multiform1_saveItem"] = function(data, params){
$('.multiform-steps a[data-code=watch_multiform2]').trigger('click');
}
Как реализовать подобный мастер из разных форм
Разметка HTML на 3 шага (панель шагов и контейнер для загрузки форм):
<div class="multiform-steps">
<a href="#" class="as-form-link btn btn-outline-primary" data-code="watch_multiform1" data-itemid="0" data-target="#multiform" data-mode="replace" data-hidelink="0">Форма 1</a>
<a href="#" class="as-form-link btn btn-outline-primary" data-code="watch_multiform2" data-itemid="0" data-target="#multiform" data-mode="replace" data-hidelink="0">Форма 2</a>
<a href="#" class="as-form-link btn btn-outline-primary" data-code="watch_multiform3" data-itemid="0" data-target="#multiform" data-mode="replace" data-hidelink="0">Форма 3</a>
</div>
<div id="multiform" class="my-2">
</div>
JS для состояния кнопок:
<script>
$(function(){
$(document).delegate('.multiform-steps>a', 'click', function(){
$('.multiform-steps>a').removeClass("btn-primary").addClass("btn-outline-primary");
$(this).removeClass("btn-outline-primary").addClass('btn-primary')
});
setTimeout(function(){
$('.multiform-steps>a:first').trigger('click');
}, 600); // выбор первого шага (задержка для прогрузки модуля форм)
as.formcallbacks["watch_multiform1_saveItem"] = function(data, params){
$('.multiform-steps a[data-code=watch_multiform2]').trigger('click');
}
as.formcallbacks["watch_multiform2_saveItem"] = function(data, params){
$('.multiform-steps a[data-code=watch_multiform3]').trigger('click');
}
});
</script>
Сами формы могут быть любыми, но для них хорошо бы указать следующие настройки в SaveItem: 0 HideFormAfterSubmit, 1 EnableSaveAlert
Другие модули
Редактирование одиночных полей формы в личном кабинете
Цвет фона формы. Как изменить фон формы на сайте
Работа с буфером обмена на сайте. Как скопировать текст в буфер обмена
Обновление содержимого страницы сайта (Refresh container). Перезагрузка части страницы
Последние обновления
Форма 29.03.2025
Форма 17.02.2025
Файлы и документы 10.01.2025
Форма 01.11.2024
Форма 23.10.2024
Форма 13.08.2024
Таблица 03.06.2024
Таблица 23.09.2023
15.09.2023
Визуализация 02.08.2023
Визуализация 02.08.2023
Визуализация 01.08.2023
Таблица 18.03.2023
Форма 19.12.2022
Таблица 06.12.2022
Форма 01.12.2022
Форма 21.11.2022
SQL-инструмент для создания личных кабинетов на сайте

Платформа Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки
Это быстрое внесение изменений
по ходу эксплуатации программы
Это современный интерфейс
полная адаптация под мобильные устройства