Multi part forms with Javascript
12th August 2003
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.
More recent articles
- Weeknotes: Embeddings, more embeddings and Datasette Cloud - 17th September 2023
- Build an image search engine with llm-clip, chat with models with llm chat - 12th September 2023
- LLM now provides tools for working with embeddings - 4th September 2023
- Datasette 1.0a4 and 1.0a5, plus weeknotes - 30th August 2023
- Making Large Language Models work for you - 27th August 2023
- Datasette Cloud, Datasette 1.0a3, llm-mlc and more - 16th August 2023
- How I make annotated presentations - 6th August 2023
- Weeknotes: Plugins for LLM, sqlite-utils and Datasette - 5th August 2023
- Catching up on the weird world of LLMs - 3rd August 2023
- Run Llama 2 on your own Mac using LLM and Homebrew - 1st August 2023