How to hide / show sections of an HTML form

Question

I have an HTML form that sends an email with all questions and answers using PHP when sending.

I need to break the shape while it is too long. I need only one submit button and only once to download the form. This obviously means that I need to use show / hides JavaScript.

I tried to use many different types, but I can not get them to work correctly with my form. It is quite large and seems very complicated to work with show / hide :(

I used show / hide divs before, but not tables.

Anyone have something that can help?

What I need,

• The next button will take you to another section of the form.
• In the next section, you can return to the previous section or go to another section again.
• The last section containing previous or starting ones.

Thanks in advance.

Answer 1

This is a fairly general request. Here is one way:

• Divide the form on the pages using a div with an easy-to-manage id and only the first one is visible

.

 <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> 

• Use the simple JS function to switch between pages

.

 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; } 

Edit

If you want to use the table layout, split the for into several tables (one for each page) and assign id tables instead of div s

Answer 2

If you just want to organize the form in a view, what about something like an accordion widget? Take a look at http://docs.jquery.com/UI/Accordion

Answer 3

Well, if you're happy to use only CSS (and be aware of cross-browser issues that may arise), one approach is to use the pseudo-class :target .

Divide the form into related input groups, using the fieldset tag in this case. Give each array an id attribute and configure those fieldset tags with a tags.

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 .

Literature:

• :target pseudo-class .