In one of our projects, we wanted to give our admin users the option to sign up as many people as they want at one time, but without presenting them with a very long form full of duplicated fields that they probably won’t need. We used a bit of JavaScript to duplicate the relevant fields as the user needed them, so they could get as many or as few as required.. The basic idea is:
- Grab the relevant fields and clone them using
cloneNode. - Iterate through the cloned fields and add a number to the end of the values for the input’s
idand label’sforvalue. We need to keep our ids unique! - Append the new fields to the end of the containing div.
What if JavaScript is turned off?
We’ll need to make sure that users with JavaScript turned off can add extra fields, too. Adding a name/value pair to the submit button will submit the page to the server with a indication that the user has JavaScript turned off:
value="Add new user" name="add-user-no-js"
The doctype is XHTML strict and the mark-up meets Level AAA accessibility standards. The JavaScript is unobtrusive DOM scripting.
Note: This article has been changed to include a simplified example. The original example included show/hide functionality which added unnecessary complexity.
-
Very interesting solution to a problem that is bound to become more common.
-
Hello,
The solution is great! More than that – I failed to find anything of a kind on the Net.
Frankly I’m very interested in actual solution for expanding form ( by cloning a node ) + displaying | hiding fields by request. I tried to find the tutorial you’ve mentioned at ‘A List Apart’, but with no success. Apparently you’ve not finished it yet.I’m just wondering what is the trick to expand form and display field by demand ( hope it’s not very rude of me to ask …)
I’m a newbie to JavaScript, so it’s not easy to me to work it out by myself…Thanks a lot.
Victor.
Comments are now closed.

5 comments
Trackback link: http://www.thatvoodooyoudo.com/accessibility/expanding-form/trackback/