How to hide/show sections of a HTML form

Question

I have a HTML form which when submitted sends an email with all the questions and answers using PHP.

I need to break the form down as it's too long. I need only one submit button and for the form to load only once. This obviously means that I need to use JavaScript show/hides.

I've tried using many different types but I can't get them to work properly with my form. It is quite large and seems to be very complicated to get to work with show/hide :(

I've used show/hide divs before but not tables.

Anyone have anything that can help?

What I'd like is,

• A next button that takes you to another section of the form.
• Whilst on the next section you can return back to the previous section or go on to another section again.
• The last section to contain previous or submit.

Thanks in advance.

Solution 1

That's quite a common request. Here is one way

• Break your form in pages using divs with easy to manage ids and only the first one 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 a simple JS function to switch between the 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 a table layout, break the for into more tables (one for each page) and give the ids to the tables instead of the divs

Solution 2

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

Solution 3

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

Separate the form into related groups of inputs, using in this case the fieldset tag. Give each fieldset an id attribute and target those fieldsets using 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.

References:

• :target pseudo-class.

Comments

[Eugen Rieck]

There was a typo in the JS function - used frompage twice instead of topagein the second use - fixed.

[John Vasiliou]

This works perfectly when using divs. If I use tables the back and next buttons appear from all tables and none of them show/hide. They also all appear at the top and wont move down. Any idea? Don't really want to use divs as I'll need to re-style everything.

[Eugen Rieck]

Are you 100% sure you wrote <table id="formpage_1"> ?

[John Vasiliou]

<table id="formpage_1" style="visiblity: visible; display:block;" class="widthOneHundredPercent"> .... Just spoke to my boss and he suggests putting the table within the div. That way we wont have to re-style everything, think that might be the way to go.

[John Vasiliou]

Also @Eugen when I click next on a form that is very long it takes me half way down the next form as opposed to the top of it. any way to solve that?