Multi-page Forms

jxl , March 25 2008
j
jxl

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:

				<!-- 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:
				
         // 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

j
jxl

you can see this script working at:
http://rmcdr.com/adoption/application

I haven't added any validation yet as this is all volunteer work and I don't have the time yet. I'll get to it when I can but I suspect it will have to be hand written in order to work on a page-by-page case.

admin

Hi Jxl,

To have a multi page form all you need is multiple divs for all pages and on button clicks you just hide show pages code through a simple JS line!! :)

Cheers

Max

j
jxl

Thanks Max. That's what I did, but I assume my JS is more complicated than need be? Can you give a sample of the JS line that would do the job more efficiently? I'm a novice at this. Thanks.

EDIT: I looked into this a bit more but so far the only way I figured out to both make it simpler AND remove the body onLoad attribute was to hard code a style=display:none into the div tags. That way I can remove the collapseAll function entirely.

The problem with this however, is that if someone does have JavaScript disabled it does not degrade gracefully. That is, the hidden sections of the form will not show and they will never get to see the submit button.
What to do? :unsure:

Post edited by: jxl, at: 2008/03/29 23:36

EDIT: The best I have been able to do so far is to add a line of javaScript to the end of what I had before.

				window.onload = collapseAll;
				
This enables me to remove the onLoad from the body tag but does nothing to make the rest of my JS simpler. I will now make that change to the first post in this thread.<br><br>Post edited by: jxl, at: 2008/03/30 00:35

admin

Hi Jxl,

But will your solution work fine if someone has JS disabled ? if it will not work too then the one I suggested should be much smaller, easier and efficient ;)

Cheers

Max

j
jxl

Hi Max, thanks for taking all this time.
The solution I have now will work with JS disabled, you just get the whole form on one page (although you also see the buttons in between each section, so that may be somewhat annoying)

The only problem I have with your solution is I can't figure out how to do it.
My JS works the same way you described, except that I have three functions to do it. I just can't figure out a way to do it with only one line of JS.

The best I have been able to com up with so far is what is in my first post. I just don't understand how to do exactly as you suggested.

I have one function to hide the divs, one function to show the divs, and one function to hide all but the first div (I have 10 pages in my form) to start with.
Then the show and hide functions are called by the next/previous buttons.

You seem to be suggesting that this can be done without the functions but I just can't figure it out.

I did figure out that I can eliminate the third function which hides all but the first div on page load but ended up not doing it that way because they would stay hidden with JS disabled.

I have no clue how to eliminate the other two functions without having to essentially write the same thing for each button, making the JS more complex instead of less.

If you could post instructions or sample code for that I would be really, really grateful.

admin

Hi Jxl,

Its actually as you say, 2 functions, one for the next buttons to show the new form and hide the old one, and one for the back buttons to do the reverse, by default all divs styles are set to display:none except the first one when the form is opened!! ;)

Sincerely,

Max

j
jxl

Ok, I'm a bit thick. So I was more or less doing what you suggested, just making things hard for myself.

I changed the first post to reflect the final code I'm using now after this discussion.
I did leave the third function in there because I think it's worthwhile having the entire form show up without javaScript even if it's a little more code.
I also kept the hide and show functions separate instead of combining them because it stays the same no matter how many pages you have on the form. It's still just two functions but with longer forms (mine is ten pages) it's easier to set up.

Next up, a new thread with validation questions! :cheer:

Thanks for everything,
Jonathan<br><br>Post edited by: jxl, at: 2008/03/31 20:15

R
Raymon

Jonathan Max,

Thnx!!! This is exactly what i needed!

Jonathan, is it possible to show the results on the last page before it gets submitted?

Grtz,
Raymon

admin

Hi Raymon,

Yes but with JS, it should be very simple, but some code depending on how much fields you had!

Cheers

Max

w
wgalindo

but how you do with the session time out?, I think that after 20 minutes or more filling a 10 pages form if you take a brake for a drink and comeback you can lost your session and all your work, is there any way to auto save the currend form before submit it?

GreyHead

Hi wgalindo,

You can create a temporary cookie for the form with a life of a day or two, save the data in a database table or a text file and have the form check the cookie and re-load the part completed form if it recognises them.

You do need to have them submit the part-completed form though.

Bob

w
wgalindo

GreyHead you are a genius, that is a great idea!!!,

that can be a super plus for this great form addon since, long job applications, people doing long surveys etc need that badly

sadly I'm a JS newbie :( , I will suggest your idea implemented in chronoforms for future versions,
a generic javascript file with functions to do that and handle that (autosave) together with the multi pages <div> that your recommended, it will let the users save long forms the form and recall them later (using the user name in the cookie)

thanks for your feedback ;)

GreyHead

Hi wgalindo,

Max has talked about some kind of 'data saving' for the next version of ChronoForms. I'm not sure exactly what it will do as it's aimed at the problem of preserving form data when a wrong image validtion is entered. It might also help with this though.

Bob

n
needshelp

By the way the code posted is a little messed up I had to use dreamweaver to re-render the Java code when I copy and pasted;

This works beautifully, but how do I get it so when the person hits next it goes to the top of the form and does not stay at the bottom?

admin

Maybe you can also focus on some element on the top ?

n
needshelp

I was thinking about an anchor, but I have no clue how I would implement that into the script. I'm not a programmer ><

admin

just add some element and give it some id and then use document.getElementById('id_here').focus() when the button is clicked!

n
needshelp

Ty, All try it out and let know what happens.

n
needshelp

admin:

just add some element and give it some id and then use document.getElementById('id_here').focus() when the button is clicked!



				<input type=button onClick="collapseElem('mainForm_6'); expandElem('mainForm_5'); document.getElementById('topdiv').focus();" value="Go Back"/>
				


I added the code you suggest and added a div with the id of topdiv, but it's not working... not sure how to make this work.

Powered by ChronoForums - ChronoEngine.com

ChronoForms Book

The ChronoForms Book, written for ChronoForms v3 contains 350 pages of invaluable ChronoForms How-tos hints and tips.

Note: many of the ideas can be used in ChronoForms v4 but the admin interface is very different and code examples may need to be modified.

SSL

Members Login

 

2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for
goods and services provided by ChronoEngine.com