The Smield

An unobtrusive javascript UI Helping Smart Field using the Prototype library

Try it with: Yui, Prototype, MsAjax, None [expanded]

The 'smield' is a useful little user interface widget written in javascript. It combines the values of other fields on the page to allow for easier input of repeated content. Based on some javascript configuration (yep, it's manual configuration), the smield will insert an unordered list of label and radio button pairs under the target input field (of the smield).

A few common examples might be:

• You have a list of customers. Some of your customers might be known by a their company name, another might use first and last name combined, and others again might use a nick name.
• You've just uploaded a file to the web server, and you need an intuitive option to leave the file as the original file name, or select an option and specify the new name.

The smield allows the user to easily select the value for the new field based on the information already entered in the form. Don't want to decide on a new username? Click the "Use Email" option below the username field.

To check it out, view page source, view the javascript source for the smield (or minified source), it's css, and the example configuration for this page: setup.js

Click here to reveal the field of the smield! or show what the smield added.