HEADER

I wanted a multi-page form with a button at the end of each page to go to the next page.
Credit where it's due, I got this javascript from http://phpformgen.sourceforge.net/ and modified it slightly for my purposes.

So here is what worked for me.
In the Form Code HTML box add your form like this:

Code:

<!-- begin page one --> <div id="mainForm_1"> <!-- FORM FIELDS FOR PAGE ONE HERE --> <!-- next page button --> <input type=button onclick=" collapseElem('mainForm_1'); expandElem('mainForm_2');" class="mainForm" value="Next Page" /> </div> <!-- begin page two --> <div id="mainForm_2"> <!-- PAGE TWO HERE --> <!-- next page button --> <input type=button onclick=" collapseElem('mainForm_3'); expandElem('mainForm_3');" class="mainForm" value="Next Page" /> <!-- previous page button --> <input type=button onclick="collapseElem('mainForm_2'); expandElem('mainForm_1');" value="Go Back"/> </div> <!-- begin page three --> <div id="mainForm_3"> <!-- PAGE THREE HERE --> <!-- previous page button --> <input type=button onclick="collapseElem('mainForm_3'); expandElem('mainForm_2');" value="Go Back"/> </div>

More pages can be added by creating a div for each additional page. Each additional div should have it's own id of mainForm_4, mainForm_5, mainForm_6, etc. Don't forget to add "Next Page" and "Previous Page" buttons to each new div, changing the element that colapsed and expanded as necessary. Note that the first page only has a next page button and the last page only has a previous page button. In the Form Code Javascript box add this:

Code:

// collapse individual elements function collapseElem(obj) { var el = document.getElementById(obj); el.style.display = 'none'; } // expand next element function expandElem(obj) { var el = document.getElementById(obj); el.style.display = ''; } // collapse all elements, except the first one function collapseAll() { // change the following line to reflect the number of pages var numFormPages = 3; for(i=2; i <= numFormPages; i++) { currPageId = ('mainForm_' + i); collapseElem(currPageId); } } // run the collapseAll function on page load window.onload = collapseAll;

In the Javascript above, you will need to make sure that the variable for the number of form pages matches the actual number of pages that you have. var numFormPages = 3; Means that there are three pages to the form. NOTE to simplify this you could eliminate the collapseAll() function from the javaScript by setting the css for the all the mainForm divs (except the first one) to display: none; However, by using javaScript to set the divs to hide visitors will be able to see the entire form even if they have javaScript disabled in their browser. Its just that the Next and Previous Page buttons wont do anything. Post edited by: jxl, at: 2008/03/30 00:38 to reflect all changes made after the following discussion with our hero Max. Thanks Max!<br><br>Post edited by: jxl, at: 2008/03/31 20:03