The Pagination Behavior Explained

Filed under wForms Documentation on May 10, 2005 by cedsav.

This post is part of the wForms Documentation. wForms is an open-source javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.

For additional help, visit the wForms forum.

wForms allows you to easily split a long and tedious form into a multi-page
form. The next and previous page buttons are automatically added
and the form is validated page by page. If javascript is disabled, the form
degrades gracefully in one long form.

 

Example:

Page 1


Spam Opt-inDo you want to suscribe to our daily spam ?


Page 2


Fee & Other Ignominious Charges
This is the amount you’ll be charged for your current usage of our bandwidth.




 

To create a page in the form builder, create a ‘fieldset’ and set its type to ‘page’, then move the appropriate fields in it.

To use the multi-page behavior on your own web forms, follow
the following steps:

  1. Enable the wForms extension by adding the following code to the <head> element
    of your page:
    <script type="text/javascript" src="wforms.js" ></script>
  2. Add a <div> element
    for each page. The element should have the ‘wfPage’ class and an id starting
    with ‘wfPgIndex-’ followed by the page number.
    <form>
    <div class="wfPage" id="wfPgIndex-1">
    ... form elements (inputs, fieldset, ...)
    </div>
    <div class="wfPage" id="wfPgIndex-2">
    ... other form elements (inputs, fieldset, ...)
    </div>
    <input type='submit' ... />
    </form>
  3. The wFroms extension generates the ‘Next Page’ / ‘Previous Page’ buttons.
    You can use the ‘wfPageButton’ class to style them. To change the label of
    the buttons, see the documentation
    on customization    .

Any form element that is not within a ‘Page’ division is visible on
every page, except for the ’submit’ button, which is hidden until the last
page of the form is reached.

Please note: To prevent incomplete submission of a form, you need to disable the form submission with the ‘enter’ key using the following code (either in a customization.js file, or within a <script> tag *after* the link to wForms.js)

wf.preventSubmissionOnEnter = true;

 

Update: Comments are now closed for this post, but you can go to the wForms forum if you have any question or comment. Thanks !

20 Responses to “The Pagination Behavior Explained”

  1. charles cheeks Says:
    June 9th, 2005 at 9:16 pm

    Nice site!

  2. mustafa akcakaya Says:
    July 30th, 2005 at 3:07 pm

    Good. I tried and it’s working correctly.
    But i don’t understand ‘wfPageButton’. How can i use it? I hope somebody explain this.

    and great work. Thanks

  3. cedsav Says:
    July 31st, 2005 at 6:55 am

    Mustafa, ‘wfPageButton’ allows you to change the look of the previous/next page buttons with CSS.

    For instance, to make the button blue with a double border, add this to your stylesheet:

    .wfPageButton {

    background-color: #00F;
    border: 3px double #999;
    }

  4. mustafa akcakaya Says:
    August 3rd, 2005 at 12:52 pm

    Thanks cedsav. it’s okay now.

  5. johnk Says:
    August 12th, 2005 at 10:27 am

    Is there a way to have the multipage behaviour actually submit each page separately. In other words, submit the partially completed data on each page as the user presses “Next”, but then continue to the next div?

    Or maybe that’s just 4 separate forms that get displayed in sequence?

  6. cedsav Says:
    August 12th, 2005 at 9:27 pm

    Johnk, no wForms can’t submit each page individually. As you guessed it, this is a case where you want several separate forms.

  7. mustafa akcakaya Says:
    August 16th, 2005 at 1:47 pm

    Hi,

    Finally, i understood wForms. I can create and edit dynamic forms now. Excellent product :) Thanks
    But, i have a new, a little (maybe unimportant) problem:

    I created a big form, really big (32 checkboxes, 76 textfields,
    1 textarea, 12 comboboxes,27 radiobuttons, images,explanations etc…) . I used multi-page and other behaviors
    and some useful javascripts. I tried to run. Oh good, working correctly but page load is very slow, really slow. I don’t
    wanna 2 or 3 pages for the form. Only one page (Multi-Page Behavior).

    Probably, i need a loading script or something like this. If i create 3 pages for the form, i must write a
    Previous-Form-Variable-Container :) .

    what can i do? Or is a ‘wForms Loading Behavior’ exist ? :) This is unimportant but maybe somebody can help.

    Thank you

  8. cedsav Says:
    August 16th, 2005 at 8:45 pm

    Mustafa.

    Do you have a live version of this form that I can see ?

    There’s no ‘loading script’ that would help you here, but you can try to trim down the HTML code to the bare minimum (if you use a table-based layout, consider switching to a pure CSS layout).

  9. mustafa akcakaya Says:
    August 17th, 2005 at 3:11 pm

    Hi Cedsav,

    Sorry. I haven’t a live ver. this form, so for. I’m still workin’ on but i’ll post a link for you .
    You knew, i used table-based layout. i’ll remove them and try again.

    Thank you

  10. Gold Says:
    October 25th, 2005 at 1:08 pm

    Hey ya,

    I’ve got a situation where the form that I’m wanting to apply the wForms extention too is loaded via AJAX. So, when the over all page is loaded (the page that includes the .js file) the form isn’t loaded at that point.

    I noticed that at the end of the .js file there’s the section headed LET’s GO which seems to kick things off. I’ve tried to call this from the end of the file that is added to the page via innerHTML (ugly, yes, but it does the job) but it doesn’t appear to execute code added like this.

    How would I go about manually attaching the wForms extention to a newly added form on a page?

    With the prevalance of AJAX lately it may be worth having an article on this.

    Regards,
    Gold
    #include the_usual_praises.h

  11. cedsav Says:
    October 25th, 2005 at 8:34 pm

    Gold, once the form is loaded, run this (the form must have an id attribute):

    wf.addBehaviors(’your_form_id’);

  12. Gold Says:
    October 26th, 2005 at 6:56 am

    Sweet, thanks cedsav. That worked great.

  13. RDB Says:
    October 27th, 2005 at 4:50 pm

    took a bit of getting used using this, but this is great!

    i am a web designer and always, always have problems with forms! this site is truly unique and effortlessly simple to use!

    rdb

  14. Trent Says:
    November 4th, 2005 at 5:09 am

    I am making a mutli step form I want to be able to label the “next” button for each section eg, “add Members” , “add resources” etc. is this possible. what is involved?
    thanks

    trent

  15. cedsav Says:
    November 5th, 2005 at 12:20 am

    Trent,

    As of now, you have a custom label on the button (see http://formassembly.com/blog/wforms-customization/) but it has to be the same for all pages.
    What you could do though is add a text before each button to explain what’s coming on the next page.

  16. Trent Says:
    November 7th, 2005 at 3:45 am

    thanks, that was going to be my fall back. These forms are very nice. well done.

  17. Chas Says:
    November 7th, 2005 at 9:29 pm

    Is there anyway to have the page behavior and the add a row on the same page (fieldset)?

  18. Chas Says:
    November 9th, 2005 at 8:50 am

    What would cause double next page buttons on a multiform? and then double previous next on page 2? Any Ideas?

  19. Chas Says:
    November 9th, 2005 at 8:55 am

    Please disregard, I was calling the js file twice. boy do I feel dumb. Template issue.

  20. cedsav Says:
    November 18th, 2005 at 1:38 am

    Chas, yes you can have both page and repeat behaviors on the same page (as long as the repeated section is inside a ‘page’)