Постепенное открытие html-формы

#javascript #jquery #html #forms

#javascript #jquery #HTML #формы

Вопрос:

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

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

Это происходит на нескольких уровнях, скажем, на 4 или 5 уровнях, и в конце есть кнопка отправки, которая отправляет только определенные входные данные в соответствии с выбранными пользователем ветвями. Также некоторые ветви имеют идентичные компоненты, хотя первоначальный выбор был другим.

Это варианты, о которых я мог подумать:

  1. Создайте полную форму в теле html и используйте jquery, чтобы скрывать и показывать их в соответствии с выбором пользователя. Это означает, что я должен писать разделы, которые повторяются дважды.
  2. Ничего не пишите в теле и добавляйте новые элементы, когда пользователь делает определенный выбор. Это означает, что JavaScript более сложный, потому что я должен убедиться, что ничто не добавляется дважды.
  3. Напишите HTML-скелет формы и используйте append для его заполнения. Затем используйте jquery для отображения и скрытия элементов. Это не имеет ни одного из недостатков, но кажется немного неэстетичным.

Какую из них мне выбрать? Есть идеи получше?

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

Ответ №1:

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

Если вы не настолько знакомы с javascript и не знаете, как добавить форму, то я бы использовал javascript для отображения / скрытия различных частей формы.

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

Ответ №2:

Вероятно, собираюсь использовать http://wiki.jqueryui.com/w/page/12137997/Menu или jsTree (http://www.jstree.com /) о котором я узнал отсюда http://wiki.jqueryui.com/w/page/12138128/Tree