Создание страницы с динамическим содержимым?

Question

[Vladimir_19]

Необходимо сделать одностраничный модуль анкеты используя HTML, PHP, MYSQL Будет заполняться информация из 4 шагов. Информация должна заполняться пошагово с возможностью возврата к предыдущим шагам. То есть, как я понял, страница должна быть одна, просто есть условно говоря кнопки для перехода/возврата к другим шагам и на каждом шаге должно отображаться разное содержимое контента. То есть не просто лэндинг, а как я понял динамическое обновление содержимого страницы + сохранение/изменение данных указанных на предыдущем шаге Подскажите в каком направлении копать по реализации данного функционала? Может быть поделитесь примерами таких решений?

Answer 1

[Антон]

Создайте 4 формы, 3 скрывайте и показывайте "по требованию" через jq, с каждым заполнением формы дозаписывайте в БД.
Вариант 2, каждую последующую, предыдущую форму подтягивайте аяксом, навесив на кнопки "далее" и "предыдущее" идентификаторы данных форм или их адреса, откуда их тянуть

Comments

[Павел Корнилов]

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

[iljaGolubev]

дозаписывайте в БД

- плохой совет. Что делать с записанными в БД данными если пользователь не заполнил форму полностью?

[Антон]

iljaGolubev, Т.е. прошел 3\4 и закрыл? Так то да, тоже верно.
Либо, писать только после прохождения, а промежуточные писать в куку, например.
Либо, по крону чистить раз в какое то время недозаполненные.

Answer 2

[iljaGolubev]

https://www.w3schools.com/howto/howto_js_form_steps.asp
Примитивная реализация для общего понимания.
Луше собирать данные формы полностью и отправлять на сервер только после полного заполнения. Так упрощается реализация на сервере - не нужно хранить промежуточные результаты экранов.
При этом обязательна JS валидация на клиенте каждого экрана формы - иначе будет заморочка с отображением полей с ошибками пасле валидации на сервере.
Если зависимость содержимого страницы от данных формы не слишком большая, то можно использовать подобное решение.
Если же формы большие, экранов форм много, изменяемых блоков на странице много, много данных подтягивается с сервера... чтобы не запутаться в jquery спагетти - смотрите в сторону js-фрэймворков. Вот, например, нарядный вариант vue + vuetify.

Comments

[Антон]

При этом обязательна JS валидация на клиенте каждого экрана формы

Зачем на клиенте? Нет, можно, конечно, но и не вижу проблем отвалидировать на стороне пыхи

[Николай]

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

[Антон]

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

[Николай]

Автор:

При этом обязательна JS валидация

Вы:

Зачем на клиенте? Нет, можно, конечно, но и не вижу проблем отвалидировать на стороне пыхи

(я описал неудобство обработки формы со стороны сервера)

Вы, позже:

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

У вас раздвоение личности?

[iljaGolubev]

Антон, Можно, конечно, но так проще. Проверять нужно при попытке ухода с каждого экрана. В случае если пользователь может туда-сюда шастать сервер будет дёргаться каждый раз.

проставить уникальные неймы у инпутов

- естественно, куда же без них. Но ещё нужно понимать на каком экране этот инпут и показать его. А если ошибки на разных экранах, то что делать?
Решаемо, конечно... но проще на клиенте.

[Антон]

Николай, То что JS валидация обязательна - да, мой косяк, не заметил.
А про джисон я имел в виду то, чтобы формы отвалидировал сервер и возвратил json_encode'ом результаты.

[Николай]

Антон, Каждый раз при изменении поля дёргать сервер? Мьсе знает толк в извращении.