form split into 4 steps 2

[derwent]

I have a massive form that needs to go onto the web. It is way too big for one page so I need the user to enter the fields in steps.

i.e. fill first 10 fields, press next.
another page and fill in more fields, press enxt
etc etc

I have done this before in asp and using cookies but the hosting for this is plain html (no asp, php, cgi-bin) so I cannot go down this route.

What is the best way to do this?

 

[dkdude]

Try to break the "massive form" up into logical parts. Then place each part in it's own DIV (all DIVs resides inside the same FORM). Then make a JavaScript that shows only one of the DIVs at a time, hiding the rest.... stepping through each part.

Does this make sense to you?

Good Luck §:O)


Jakob

 

[derwent]

that method completely slipped my mind, thanks matey.

 

[dkdude]

No Prop!

Glad to help out §:O)

Cheers


Jakob

 

[derwent]

You wouldn`t know any good javascript to swap over the divs would you?

 

[pixl8r]

Pray

You can still use cookies and javascript right?

I would recommend using forward and back buttons to show and hide different "sections" of the same page. Use javascript to control the visibility of the items and then just use one submit button for the whole form.

The problem is that doing it this way will make you very vulnerable to user settings on the client side.

Good luck!

Wow JT that almost looked like you knew what you were doing!

 

[BabyJeffy]

How about using a frameset and reading/writing the form values to javascript in the parent frameset? Sure you still rely on Javascript (but that's a given at this stage for all the solutions put forward). Using this technique you could use multiple "normal" html pages to build up the complete form content.

Finally, the form can be submitted using the data in the frameset to build up the complete form on the "last" html page.

Just a thought,
Jeff

 

[pixl8r]

Here you go Derwent. I must have been typing at the same time as Jakob. Our solutions are pretty much identical! Cheers Jakob!

Try this for the visibility change.

function visiChange(id){
	var el = document.getElementById(id).style;
	if (el.visibility == "hidden"){
		el.visibility = "visible";
	}
	else if(el.visibility == "visible"){
		el.visibility = "hidden";
	}
}

Assign a section a div id ("row1" for example)

<div id="row1">My content</div>

and then your button onClick would be:

onClick="visChange('row1')"

You will also need to add to the function or add a new function for making the "previous" page invisible.

Hope it helps.

Wow JT that almost looked like you knew what you were doing!

 

[derwent]

Thanks folks, that has given me the start I needed!! Was having a bad day yesterday but all is sorted now!

 

[derwent]

Almost there...

I now have the form split into chunks each in it`s own div. When you complete each div you click the button and it opens up the next div

however

some of the divs are quite long so when you click to continue to the next div, your focus is way down the browser window. Can I get it to open the new div AND move the window to the top of the page??

Normally to do this I would use anchors "a href='#'" for example but this will mean I lose the form data as it loads up a new page.

My code in the div to proceed to the next div is

<a href="javascript:;" onClick="showHideLayers('set1','','hide','set2','','show','set3','','hide','set4','','hide','set5','','hide')">Please continue to the next page</a>

 

[BabyJeffy]

Try adding the following to the end of your showHideLayers() function:

window.scrollTo(0,0);

This will scroll to 0,0 (top left hand corner) of the page.

Jeff

 

[pixl8r]

You could also set focus to a specific field for each Div. You would also add that to the bottom of your showHide() function.

fieldName.focus();

I think you will probably find that you want to use both Jeff's method and mine together.

Hope that gets you there!

Wow JT that almost looked like you knew what you were doing!

 

[derwent]

Thanks folks, this is now fully up and running and works a treat!!