У меня есть HTML-форма, которая при отправке отправляет электронное письмо со всеми вопросами и ответами с использованием PHP.
Мне нужно сломать форму, поскольку она слишком длинная. Мне нужна только одна кнопка отправки и для загрузки формы только один раз. Это, очевидно, означает, что мне нужно использовать JavaScript show / hides.
Я пробовал использовать много разных типов, но я не могу заставить их работать правильно с моей формой. Он довольно большой и кажется очень сложным, чтобы работать с show / hide 🙁
Я использовал show / hide div, но не таблицы.
У кого-нибудь есть что-то, что может помочь?
Что бы я хотел,
Заранее спасибо.
Это довольно распространенный запрос. Вот один из способов
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>
,
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; }
редактировать
Если вы хотите использовать табличный макет, разделите его на несколько таблиц (по одному на каждую страницу) и присвойте id s таблицам вместо div
Если вы просто хотите организовать форму в представлении, как насчет чего-то вроде виджета аккордеона? Взгляните на http://docs.jquery.com/UI/Accordion
Ну, если вы с удовольствием используете только CSS (и помните о проблемах с кросс-браузером, которые могут возникнуть), один из подходов заключается в использовании псевдо-класса :target .
Разделите форму на связанные группы входов, используя в этом случае тег fieldset . Дайте каждому элементу field атрибут id и fieldset эти fieldset с помощью тегов.
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 .
Рекомендации:
:target псевдокласс .