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.

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.

• php
• javascript
• html
• forms
• show-hide

• Are you using a table layout for your form? – Zoidberg Commented Mar 1, 2012 at 13:44
• What's more complicated with a table layout vs. sans table in terms of show/hide javascript? Should be about the same. Can you clarify what you've tried? – user17753 Commented Mar 1, 2012 at 13:47

3 Answers 3

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

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

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.