Мультиформа с отдельными шагами-формами. Создание формы в виде мастера на сайте

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

Плюс подобного подхода (по сравнению с мастером) в том, что шаги-формы инициализируются независимо от других форм, т.к. при клике на кнопку шага, происходит полная инициализация шага. 

Также сохранение данных каждого шага происходит сразу после нажатия кнопки Сохранить (и не зависит от других шагов).

Каждая форма может иметь кастомную разметку и свои особенности сохранения и проверки полей.

В примере подключен коллбек форм для автоматического перехода на следующий шаг:

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

 

Насколько полезна эта возможность?

Другие модули

Редактирование одиночных полей формы в личном кабинете

Кнопка очистки формы

Цвет фона формы. Как изменить фон формы на сайте

Сообщение-уведомление на сайте вместо показа формы (NoForm). Отображение сообщения о недоступности формы

Работа с буфером обмена на сайте. Как скопировать текст в буфер обмена

Обновление содержимого страницы сайта (Refresh container). Перезагрузка части страницы

Любой вид формы на сайте - гибкая разметка формы

Выбор адреса и координат с подгрузкой из Google Maps API

Последние обновления

Форма генерации счета

Файлы и документы 10.01.2025

Пробы разных диаграмм

Визуализация 02.08.2023

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Сайт использует Cookie. Правила конфиденциальности OK