Выведите на экран jQuery Dialog / Popup, затем установите скрытое поле, используя результат диалога

Question

Проблема

У меня есть страница с формой. В нем есть скрытое поле с именем: generic_portrait

Я хочу, чтобы пользователь щелкнул ссылку «выбрать портрет»

Это откроет диалог / всплывающее окно с использованием jQuery, основываясь на раскрывающемся меню, заполненном ранее в форме. Если в раскрывающемся списке «пол» выбрано «мужской», укажите параметры для мужчин, если для «пола» установлено значение «женский», укажите параметры для женщин.

Каждый портрет имеет переключатель, каждому из которых присвоено имя "male1", "male2" и т. Д.

В зависимости от переключателя, выбранного во всплывающем окне, я хочу, чтобы скрытое поле было установлено в соответствии с этим.

Вопросы

Какой лучший способ показать диалог / всплывающее окно, используя jQuery, отличается в зависимости от раскрывающегося списка на странице. Используйте Javascript, чтобы увидеть, что выбрано, а затем показать соответствующий Div?

Я могу выполнить проверку, чтобы увидеть, на что настроен раскрывающийся список, с помощью jQuery, но как мне тогда показать конкретное всплывающее окно, основанное на этом?

Как только я выскочил, как мне взять значение, назначенное выбранному радиобоксу, и установить скрытое поле с именем "generic_portrait" на это значение.

Почему я спрашиваю

Обычно я сам разбираюсь в этом, так как уверен, что это не так сложно, но я не очень часто использую Javascript и / или PHP, и это срочно для клиента. Так что я очень, очень признателен за помощь в этом.

Спасибо за все ответы заранее.

Answer 1

У Моисея есть хорошее понимание. Но, чтобы конкретно ответить на ваши вопросы:

• Для всплывающего окна, которое вам нужно, вы можете попробовать использовать "модальный". Посмотрите библиотеку пользовательского интерфейса jQuery и, в частности, посмотрите на диалоговое окно .
• Относительно того, как показывать разные модальные значения в каждом случае, можно было бы создать пустой элемент div, который по умолчанию скрыт с помощью CSS. Затем, используя виджет диалога, создайте разные модальные для каждого. Базовый пример: $("#yourID").html("your content").dialog({title:"your title",show:"fade",hide:"fade",buttons:{Done:function(){$(this).dialog("destroy");}}}); ПРИМЕЧАНИЕ. Существует несколько способов создания модального содержимого, в том числе создание их полностью в HTML, при этом они скрыты, а затем просто используются диалоговые виджеты для их отображения.
• Что касается того, как заполнить ваше скрытое поле тем, что было выбрано в диалоговом виджете, посмотрите на диалоговый виджет исходный код (например, ссылку «просмотреть исходный код» на странице), чтобы увидеть, как они получают форму ценности. Затем вы можете использовать jQuery для установки атрибута значения скрытого поля.

Answer 2

Прежде чем ответить на ваш вопрос, вам следует подумать о том, существует ли более разлагаемый (то есть не зависящий от js) подход к вашей форме.Без включенного JavaScript, похоже, что ваши пользователи будут мертвы в воде, так сказать, поскольку они не смогут ответить на вопросы по полу.

Если ваши клиенты не заботятся о постепенном ухудшении,Я предлагаю разбить форму на части, а затем подавать правильные части через php в зависимости от того, что выбрал пользователь.Это устраняет необходимость в модальных диалоговых окнах (которые, хотя и круты, недоступны) и позволяет гораздо большему количеству вашей аудитории участвовать в форме.