Fri Oct 24, 2014, 1:29 pm
 Locked  72  46059
3 4 5 6 7 8
Showing 1 to 10 of 73 entries.
Tue Mar 25, 2008, 10:45 pm

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

14 0
Fri Mar 21, 2008, 3:30 pm
Wed Mar 26, 2008, 7:52 am

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.

14 0
Fri Mar 21, 2008, 3:30 pm
Thu Mar 27, 2008, 5:40 am

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


If your main question got answered then please select the answer using the GREEN button!

Moderator
11463 14148
Mon Aug 14, 2006, 1:29 am
Sat Mar 29, 2008, 7:13 am

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

14 0
Fri Mar 21, 2008, 3:30 pm
Sun Mar 30, 2008, 4:49 pm

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


If your main question got answered then please select the answer using the GREEN button!

Moderator
11463 14148
Mon Aug 14, 2006, 1:29 am
Mon Mar 31, 2008, 2:38 am

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.

14 0
Fri Mar 21, 2008, 3:30 pm
Mon Mar 31, 2008, 10:40 pm

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


If your main question got answered then please select the answer using the GREEN button!

Moderator
11463 14148
Mon Aug 14, 2006, 1:29 am
Tue Apr 1, 2008, 12:08 am

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

14 0
Fri Mar 21, 2008, 3:30 pm
Thu Apr 3, 2008, 3:21 pm

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

17 0
Mon Feb 11, 2008, 5:27 pm
Fri Apr 4, 2008, 7:07 pm

Hi Raymon,

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

Cheers

Max


If your main question got answered then please select the answer using the GREEN button!

Moderator
11463 14148
Mon Aug 14, 2006, 1:29 am
Showing 1 to 10 of 73 entries.

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