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.
5 comments
April 11, 2006 at 2:05 pm
James Norton
Very interesting solution to a problem that is bound to become more common.
October 24, 2006 at 7:20 pm
Marino Ceccotti
Hello,
I’ve tested the DHTML form. Will it still be fully workable without javascript support? For it is a prerequisite of the AAA acessibility level.
Wiil the “Add new user” be replaced by a query to a server-based script?
Marino
December 6, 2006 at 9:57 am
janettegirod
Hi Marino,
If Javascript is disabled and the user clicks “Add new user”, the button will send a name/value pair to the server for processing. In this instance, this looks like:
<input type="submit" value="Add new user" name="add-user-no-js" id="add-user" />which would send
add-user-no-js=Add+new+userto the server. Then the server sends back a page with fieldsets for several more applicants.
Janette
January 15, 2007 at 10:46 am
VIctor
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.
January 15, 2007 at 12:23 pm
janettegirod
Hi Victor,
You’re right, I still haven’t written up this tutorial properly. (But please look for me in the March issue of .net magazine!)
I had another look at my example and realized that it’s unnecessarily complicated. I’ve updated the post to show a much more simple example, where the only thing happening is cloning, incrementing, and appending new input fields.
The JavaScript contains lots of comments to help you keep track of what’s going on. I hope this is a little more helpful!
Best,
Janette