Выберите $ this, отобразите $ that - как это сделать с помощью формы?

Question

У меня есть HTML-форма с множеством параметров, которые пользователь может заполнить (имя, адрес электронной почты и т. Д.), А затем у меня появится раскрывающееся меню с просьбой выбрать «Стиль А» или «Стиль Б».

Если выбран «Стиль A», то для этого стиля будут определенные размеры, если выбран «Стиль B», тогда будут определенные размеры для этого стиля и т. Д.

ОднакоЯ полный нуб, когда дело доходит до чего-то, кроме xhtml / css и минимального PHP / javascript (очень минимального), поэтому я не уверен, как именно это сделать.Будут ли отображаться эти параметры, когда пользователь выбирает стиль a / b, или ему нужно будет выбрать стиль, щелкнуть «Отправить» и загрузить другую форму?Я не уверен, как именно это можно сделать, поэтому в моей книге все работает!

Кто-нибудь может мне помочь с проблемой?

Спасибо огромное за любую помощь в этом.

Answer 1

Одним из хороших способов было бы иметь контейнер вокруг вашей формы, такой как:

<div id="style_container" class="styleA">
  <form> .. </form>
</div>

Тогда вы можете иметь записи в ваших CSS-файлах, такие как:

div.styleA input
div.styleB input

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

$("select#style_select").change(function(){
  $("div#style_container").removeClass("styleA styleB");
  $("div#style_container").addClass($(this).val());
});

Таким образом, вам нужно всего лишь изменить этот класс в этом контейнере div, и вся страница должна обновляться в соответствии с вашими правилами CSS.

Answer 2

Вы уже дали 2 решения:

1. Одна форма, когда выбрана опция стиля, будут отображаться дочерние опции, связанные с конкретным стилем, самый простой способ сделать это - иметь JavaScriptФункция (назовем это switch_size_display) отображает или скрывает доступные опции при изменении выбора стиля.
2. Многостраничная форма, это сложнее и менее предпочтительно для ваших посетителей, это можно сделать с помощью кукиили Post: на странице 1 пользователь выбирает «стиль», который будет сохранен в переменной (cookie / get / post), на странице 2 пользователю будут представлены «размеры» относительно стиля, найденного напеременная.

Если вы изучаете Javascript и PHP, оба эти решения являются очень хорошими упражнениями.И последнее, что вы никогда не должны доверять пользовательскому вводу. Если вы создаете веб-сайт, который будет доступен онлайн (не локально), пожалуйста, убедитесь, что вы проверяете строго все, что приходит с URL, Cookies и т. Д.

Answer 3

Вы можете сделать это полностью с Javascript.Стиль 'A' будет классом (или набором классов), а стиль 'B' будет другим классом (или набором).

Когда пользователь выбирает стиль «A», пропустите все ваши элементы, которые вы хотите обновить, и их соответствующий класс из стиля «A».Если пользователь выбирает стиль «B», сделайте то же самое для него.

HTML

<select id = 'styler' name = 'styler'>
    <option value = 'a'>Style A</option>
    <option value = 'b'>Style B</option>
</select>

---

Javascript

(для простоты используется jQuery)

$(function() {
    $('#styler').bind("change", function() {
        if($(this).val() == 'a')
            $(".bClass").removeClass("bClass").addClass("aClass");
        else
            $(".aClass").removeClass("aClass").addClass("bClass");
    });
});