Dynamic Drive- Multi-Part Form script

Dynamicdrive.com

New

Revised

Hot

FAQ

Submit

M Zone

.	Menu
	Search DD Recommend DD Help Forums New DHTML books Advertising Contact
	Featured Script Rollover buttons Turn regular form buttons into rollover menus with this script! .
	Partners
	Free JavaScripts .
	Link to DD
	Do you use scripts from Dynamic Drive? Please give something back by linking to us... .

Home Form effects Here

Multi-Part Form script IE

Credits: Dynamic Drive

Description: A lengthy form can appear daunting to your visitors filling it out. That's where this script can help. It allows you to break up any form into multiple parts, viewable one part at a time. The script automatically creates the necessary "back" and "forward" link when needed. For browsers that don't support this script, the entire form simply appears all at once, like with a regular form. Browser support for this script are IE5+ and NS6+.

We called this script Multi-Part Form script, but the fact is, you can use it to break up any lengthy chunk of content on your page. The back/forward link is fully customizable as well. Very cool!

Demo: Try playing around and cycling through the form below.

Directions:

Step 1: Add the below script to the <HEAD> section of your page:

Step 2: It's now time to break apart your form into many parts! The procedure is as simple as it gets- simply wrap each part in a special <DIV> tag as shown below:

<form>

<div class="multiparts" style="display: block">
1) Name: <input type="text">
</div>

<div class="multiparts">
2) Email: <input type="text">
</div>

<div class="multiparts">
3) Contact: <input type="text"><br>
<input type="submit" value="submit">
</div>

</form>

Notice how the first <DIV> tag contains a "style:block" declaration.

Step 3: Finally, we still need "back/forward" links so the viewer can browse through the various parts. Add the below HTML code to the bottom of your form:

This creates a basic "back" and "forward" text link to be used for the task. Yes, you want to know if this portion is customizable. We made sure of that. You can in fact change most of what's in the code of Step 3 to help modify the look of the links, as long as the outside <DIV> is retained, the various IDs (ie: id="backbutton"), and the hrefs (ie: javascript:cycleback()). With that in mind then, here's a modified version of the "back" text link to use an image instead:

<a id="backbutton" href="javascript:cycleback()" style="float:left">
<img src="back.gif" border="0"></a>

That wasn't too hard was it?

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6

Copyright � 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference