1

this thing is driving me nuts. I'm working on a personal "for my own fun" project involving a quite long sign up form.

What I want to do is to split the form into sections grouping the fields that are relevant for each step, and the ability to navigate back and forth before pressing Submit, which check marks or something to indicate which step is complete or not. I've found some examples around but they don't really fit into my design and can't get around to modify them exactly how I want.

I was aiming at something similar to the slide show in forum http://forum.xtreamer.net/, with the progress bar at the bottom and the clickable steps. I would like to do something like that but for the steps in a form.

Any ideas of where should I start? I tried to look at their code to see if they use a public or commercial (but third party) jquery plugin but no dice.

Anyone can recommend a tutorial or some resources?

Thanks!

TuxMeister
  • 275
  • 1
  • 8
  • 20
  • Possible dupes: http://stackoverflow.com/questions/5186801/jquery-break-form-into-steps http://stackoverflow.com/questions/2074707/creating-multi-step-forms – gideon Mar 17 '11 at 14:56

2 Answers2

1

I just designed something similar recently using jCarousel. it is a jquery plugin that allows you to easily scroll to certain positions, or ids on the page.

What we did was create a long horizontal page with several divs floated to the left. Each div contained a step or two, and had forward and back buttons at the bottom. When you click the next button on a particular step, it would quickly slide away and then next one would slid in

In addition to this, there were absolutely positioned buttons at the top that could take you to each step individually.

Here is an example of the individual navigation to go back and forth:

<div class="nav">
    <a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">&larr; Back</a>
    <a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next &rarr;</a>
</div>

The #1 and #3 are ids of the prev, next steps -- this code being taken from step 2. 3000 is the milliseconds to scroll to each particular part of the form. 3 seconds is a bit long, but we had some animated images between the steps to make the form a little more fun!

Hope this helps :)

Michael Jasper
  • 7,962
  • 4
  • 40
  • 60
  • Thanks, will give this a try. Do you have a link to your version so I can see how it behaves? If you can't share that, I understand. Thanks again. – TuxMeister Mar 17 '11 at 17:51
  • yeah, if you would like to, sign up at http://www.mymark.com - there is a 7 day free trial for the website – Michael Jasper Mar 18 '11 at 15:43
0

I think you trying develop a form in which user finish personal details and on click go to office details then on click go to address details and at last submit.

Try to use jquery show() hide()

There will be three divs.

when on click you show one div , hide other two divs.

there should be validation in each divs and on completing one details there should be some hidden flag to check that details is completed.

On the final details before submit you should check the flags for each div.

As you are trying to give option to come back to the first div , user can empty details of first and go to final. So this flag check is must

Should work !!!

zod
  • 12,092
  • 24
  • 70
  • 106