Multi-Page Forms

[WiseWizards]

Hello!

I would like to create a form that is spread out over several pages. I do not want to create seperate forms for each page, since information users enter could get mixed up with someone else's information. Is there a way I can do this without asking the user for their "ID" every page?

Thanks,
Mike

[ADAM Web Design]

There are a few ways that this could be accomplished. The exact nature of this would depend on your programming language, but the concepts would remain the same:

1. Session variables/Cookies. A cookie/session variable housing the appropriate could be read from a user's computer and processed as needed. If cookies are disabled, this functionality would be disabled as well.
2. Querystring. Pass the user id from one form to the next via querystring. The problem with this method is that someone, either by accident or on purpose, could elect to alter the querystring and thus cause processing errors within the form.
3. Hidden form input. This is the one I personally prefer. A hidden form field would generally be more trouble to modify than it's worth, and in the case of a multi-part form would have to be isolated and modified multiple times. Mind you, this is only true if you're POSTing your form information. Do not GET your form information, or you will end up with a querystring that, as stated above, can be manipulated.

Hope this helps.

[WiseWizards]

Thanks for the answer! If it's not too much to ask, could you demonstrate the "query-string"?

Regards,
Mike

[M0rtym0use]

{Page1}
<form action="page2.html?id=123&<%=Request.Form("var1")% ><%=Request.Form("var2")%>" method="post">
<input type="text" name="var1">
<input type="text" name="var2">
<input type="submit" name="Submit">
</form>
to reference the value on page 2...
<%
strID = Request.Querysting("id")
%>
MM

[DOA]

This can also be done using Javascript and <span> tags. E.G

<form method="post" action="process.asp">

<span id="page1" style="display: inline">

</span>

<span id="page2" style="display: none">

</span>

<span id="page3" style="display: none">

</span>

</form>

When the page first loads, only the fields in the "page1" span ae visible. To move between "pages", you need a button or similar that when clicked loads a javascript function. The function hides the "page1" area and shows the "page2" area eg:
page1.style.display = "none";
page2.style.display = "inline";

This can me modified to include as many pages as you need. If you need a working example let me know and i'll knock one up for you.

Mike

[WiseWizards]

Yes, please. If it's not a problem, please show me an example.

Thanks to everyone who's tried to help! :-)

Regards,
Mike

[DOA]

As promised, the example can be found at http://uk.geocities.com/mike.smith76@btinternet.com/

Its all javascript so you can do a view source to get the code. The only problem is its hosted on a free geocities / yahoo server, so they've added their guff at the end of the page.

All you have to do is add the fields you want to each <span> section, i recently created an online application form with 7 pages and around 50 fields using this method, so there doesnt seem to be a limit.

Any questions give me a shout on mike.smith76@btinternet.com

Mike

[WiseWizards]

Thanks so much! :-) I'll try it out ASAP!

Regards,
Mike

[DOA]

No problem, hope it helps

Mike

[WiseWizards]

Do I remove onSubmit="return false" from the form?

[WiseWizards]

Oh, by the way, I changed my username to "WiseWizards". Incase you don't remember, my original username was "MikeysTown".

Regards,
Mike

[DOA]

yes I put that line there to stop the form being submitted, as its not getting submitted to anything. When you make a live form this should be removed.

So hows the form going, run into any problems?

Mike

[WiseWizards]

No problems yet, of course I haven't really completed it yet. I just finished planning my fields. Thanks for the reply, though. I'll reply soon to tell you my outcome.

Regards,
Mike

[WiseWizards]

I was wondering, is it possible to use this script to change which page a user goes to according to which button they hit?

I would like the user to enter their personal info on the first page, then the next page displays the packages we offer. To the right of each package will be a button that says "Purchase". Finally, I want the third page to be based off the second page's package selection.

For example, if a user selects "Basic" on the second page, they'll go to a page that asks the usual stuff, but if they select "Pro" on the second page, they'll go to a page that asks special pro stuff. I would still like to keep all this in the same form, like before, so is this possible?

Kindly,
Mike

P.S. Also, if I wanted to create more pages, I could just copy the page2 script, right?

[DOA]

Yes to add more pages just copy the page 2 bit, and change the values in the nextPage() and backPage() functions (onClick on the buttons).

As for the second part of your query, you could use html radio buttons to allow a user to select basic or pro. When a user clicked the next button on this particular page the javascript would check the value of this checkbox, and display the appropriate span tag.

Just one more thing, this code only seems to work in Internet Explorer, only just downloaded Mozilla and it doesn't seem to want to play.

[WiseWizards]

Thanks! I think I have everything!

Regards,
Mike