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,
Thanks in advance.
That's quite a common request. Here is one way
div
s with easy to manage id
s 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>
.
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 id
s to the tables instead of the div
s