RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Create Fast, Smooth Multi-page Forms with JavaScript

Developing a multi-page form inevitably involves tradeoffs. To avoid long scrolling forms, developers often think they're forced to implement lengthy and slow round-trips to get subsequent pages and to confront the complexities of storing state between the form pages. But using JavaScript, you can both avoid scrolling and eliminate wasteful round trips.

eb Developers constantly make trade-offs; sometimes sacrificing usability for speed and sometimes sacrificing speed for usability. One example of such a trade-off becomes evident when you consider the task of creating a multi-page form. Multi-page forms are common, because on one hand, developers try to avoid lengthy pages that force the user to scroll more than is necessary. On the other hand, developers attempt to avoid expensive return trips to the server to serve multiple pages when one will do. When you separate multi-page forms into separate Web pages, the complexities of storing state come into play: Multi-page forms are more difficult to manage than single-page forms, because developers must store the user entries from preceding pages and create navigational aids for moving forward and backward between the form's pages. When you decide to opt for a multi-page form over a long scrolling from, you then have to decide how much of the form to display to the user on each page, as well as how many trips (pages) to the server you can tolerate. So the problem is:

How do I create a multi-page form that minimizes both scrolling and the number of round-trips to the server?

Place all the HTML code for the form on a single page, with each page wrapped in a

tag, and then use some basic JavaScript to provide navigation through the "pages" of the form, submitting the data only once, and letting you treat the data on the server as a single-page form.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date