How to hide/show sections of a HTML form

问题

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.

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

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

回答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.

来源：https://stackoverflow.com/questions/9517286/how-to-hide-show-sections-of-a-html-form

标签

php

javascript

html

forms

show-hide