Многоуровневая HTML форма с вкладками

Рейтинг: 0Ответов: 1Опубликовано: 12.01.2023

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

Пояснения к рисунку:

  1. Это календарь событий в единой форме, где можно добавлять месяцы, даты и события.
  2. При нажатии на январь и 28 соот. кнопки становятся зелеными, высвечиваются события проснулся утром, поел в обед, лег спать.
  3. При клике на февраль и 7 - видим соот. события

Вопросы:

  1. Понимаю как реализовать frontend часть через метод .append(), но не могу понять по архитектуре.
  2. Где будет находится зеленая ветка января с несохраненным input event3 «Здесь я пишу что-то сейчас», когда я щелкну на февраль и 7. Или когда нажму на + у месяцев. Создавать многослойный друг над другом и управлять ими через z-index? Может есть решение поизящней?
  3. Как построить архитектуру serializeArray() при отправке формы? Я подписал name у каждого элемента, но не уверен что правильно. И мне точно нужен serializeArray() ?
  4. Может есть плагины? Проект на Wordpress

введите сюда описание изображения

html массивы форма вкладки
Источник: Stack Overflow на русском

Ответы

▲ 0

  1. Ну, скорее всего, с точки зрения архитектуры, это не верное решение, но я бы сделал так: для месяца и для дат поставить "чекеры", т.е., выбран ли какой-то месяц и дата.

  2. Далее сделал бы запрос на сервер (Допустим, через ajax), который вернул бы мне список каких-то дел (Событий) в этот день (В виде JSON массива (Не забываем пропарсить)). Далее сделал бы ОДНУ модалку (Или что вы там используете для отображения событий за какую-то дату) и выводил бы туда весь этот список дел (Событий).

  3. Где будет находится зеленая ветка января с несохраненным input event3 «Здесь я пишу что-то сейчас», когда я щелкну на февраль и 7. Или когда нажму на + у месяцев

Нигде. Это можно просто не сохранять, я думаю, что пользователь привыкнет к этому. хаха)

Или можно это всё же сделать в модалке (Как я писал выше) и настроить обработчик (Что-то типа jQuery.change или других). При закрытии делаем запрос на сервер с просьбой сохранить то, что сейчас должно быть закрыто

  1. Как построить архитектуру serializeArray() при отправке формы? Я подписал name у каждого элемента, но не уверен что правильно. И мне точно нужен serializeArray()?

Просто скажу, что я в этом не уверен, что оно вам нужно. То самое и про name. Лучше пробуйте смотреть в сторону jQuery селекторов по Id.

  1. Может есть плагины? Проект на Wordpress

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