Expanding Form

March 12, 2006 in Accessibility, JavaScript by admin | 5 comments

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.

  1. James Norton’s avatar

    James Norton on April 11, 2006 at 2:05 pm

    Very interesting solution to a problem that is bound to become more common.

  2. Marino Ceccotti’s avatar

    Marino Ceccotti on October 24, 2006 at 7:20 pm

    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

  3. janettegirod’s avatar

    janettegirod on December 6, 2006 at 9:57 am

    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+user
    to the server. Then the server sends back a page with fieldsets for several more applicants.

    Janette

  4. VIctor’s avatar

    VIctor on January 15, 2007 at 10:46 am

    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.

  5. janettegirod’s avatar

    janettegirod on January 15, 2007 at 12:23 pm

    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

Comments are now closed.