Simon Willison’s Weblog

Multi part forms with Javascript

Andy Arikawa has a nice demonstration showing how multi page forms can be served up as a single page using some simple Javascript, resulting in a clearer form without loading times in between each page.

The concept is great, but the execution has a some subtle flaws—the most important of which is that browsers with Javascript support turned off (but CSS turned on) will not be able to use the form. The culprit is the use of a style="display: none;" attribute on the two divs that should initially be hidden. CSS supporting browsers will follow this rule blindly, even if Javascript is disabled and they will thus be unable to later reveal the hidden page content. The solution is to have all of the elements visible initially, then hide them with a piece of Javascript that executes when the page has loaded.

My other small gripe is the use of javascript: in the href part of the links to activate the toggle function. Dive Into Accessibility has the skinny on why this is a bad idea. Since the toggle links lead to other sections of the form, it makes sense to use the IDs of those sections as the link so that browsers without javascript will still “jump” to the section that is linked to. The Javascript itself can be placed in an onclick attribute (and duplicated in an onkeypress attribute for improved accessibility).

Taking the above points in to account, here’s a reworked version of Andy’s demonstration that should work just fine in browsers with Javascript support disabled.