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:

  1. Grab the relevant fields and clone them using cloneNode.
  2. Iterate through the cloned fields and add a number to the end of the values for the input’s id and label’s for value. We need to keep our ids unique!
  3. 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.

See the form.

Note: This article has been changed to include a simplified example. The original example included show/hide functionality which added unnecessary complexity.