Как скрыть / показать разделы HTML-формы - PullRequest
Новая
       4

Как скрыть / показать разделы HTML-формы

6 голосов
/ 01 марта 2012

У меня есть HTML-форма, которая при отправке отправляет письмо со всеми вопросами и ответами с использованием PHP.

Мне нужно сломать форму, так как она слишком длинная. Мне нужна только одна кнопка отправки и форма загружается только один раз. Это, очевидно, означает, что мне нужно использовать JavaScript show / hides.

Я пробовал использовать много разных типов, но не могу заставить их правильно работать с моей формой. Он довольно большой и кажется очень сложным для работы с show / hide: (

Я раньше использовал div / show / hide, но не таблицы.

У кого-нибудь есть что-нибудь, что может помочь?

Что бы я хотел, это

  • Следующая кнопка, которая переводит вас в другой раздел формы.
  • В следующем разделе вы можете вернуться к предыдущему разделу или снова перейти в другой раздел.
  • Последний раздел, содержащий предыдущие или отправленные.

Заранее спасибо.

Ответы [ 3 ]

7 голосов
/ 01 марта 2012

Это довольно распространенный запрос.Вот один из способов

  • Разбить вашу форму на страницах, используя div s, с простыми в управлении id s и только первый видимый

. 

<form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; .."> 
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- NEXT button -->
  <input type="button" value="next" onclick="pagechange(1,2);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and NEXT buttons -->
  <input type="button" value="back" onclick="pagechange(2,1);">
  <input type="button" value="next" onclick="pagechange(2,3);">
</div>
...
<div id="formpage_10"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and SUBMIT buttons -->
  <input type="button" value="back" onclick="pagechange(10,9);">
  <input type="submit" value="Submit">
</div>
  • Используйте простую функцию JS для переключения между страницами

. 

function pagechange(frompage, topage) {
  var page=document.getElementById('formpage_'+frompage);
  if (!page) return false;
  page.style.visibility='hidden';
  page.style.display='none';

  page=document.getElementById('formpage_'+topage);
  if (!page) return false;
  page.style.display='block';
  page.style.visibility='visible';

  return true;
}

Редактировать

Если вы хотите использовать макет таблицы, разбейте for на несколько таблиц (по одной на каждую страницу) и присвойте таблицам id s вместо div s

3 голосов
/ 01 марта 2012

Если вы просто хотите организовать форму в виде, как насчет чего-то вроде аккордеонного виджета?Взгляните на http://docs.jquery.com/UI/Accordion

1 голос
/ 01 марта 2012

Что ж, если вы счастливы использовать только CSS (и помните о кросс-браузерных проблемах, которые могут возникнуть), один из подходов заключается в использовании псевдокласса :target.

Разделитесформируйте связанные группы входов, используя в этом случае тег fieldset.Присвойте каждому набору полей атрибут id и укажите эти fieldset s, используя теги a.

HTML: 

<form action="#" method="post">
    <a href="#one">Page One</a>
    <fieldset id="one">
        <legend>Page One</legend>
        <label for="p1i1">label for input one</label>
        <input id="p1i1" />
        <label for="p1i2">label for input two</label>
        <input id="p1i2" />
    </fieldset>

    <a href="#two">Page Two</a>
    <fieldset id="two">
        <legend>Page Two</legend>
        <label for="p2i1">label for input three</label>
        <input id="p2i1" />
        <label for="p2i2">label for input four</label>
        <input id="p2i2" />
    </fieldset>
</form>

CSS: 

fieldset {
    height: 0;
    display: none;
    overflow: hidden;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}
fieldset:target {
    display: block;
    height: 5em;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}

JS Fiddle demo .

Ссылки:

...