Combining first and last name form fields to make a suggested preferred display name with JQuery

Names are one the annoyances of the web development world. We want to have everything be neat, to have our brilliant content management system (Drupal) take the raw data (a site participant's name) and display it as it makes sense in different contexts.

Sometimes it comes down to asking people what they prefer to be called.

But you don't want to make people fill out extra fields in a form just because your web software isn't smart enough to read minds and figure out that John Smith's preferred display name is in fact John Smith. It would be really nice, then, to have your form automatically take the values entered in for Given Name and Family Name (and perhaps that vast no-man's land of middle names or middle initials, or the dangerous outskirts of prefixes and suffixes) and combine them into a suggested display name.

That's what this post is about.

The elements needed to do this:

1. React to the tabbing out or otherwise leaving of focus of a form field after some data has been entered. (We don't want to make people click a checkbox or button to pre-fill the combined name field.)
2. Get data from two or more fields, at least one of which and with luck both (or more) was just filled in by the user, and combine it into one text string.
3. Place the combined data in the preferred display name field.
4. Let the user mess with this data as he or she likes. Don't lock (make read-only) this element.

Although simple, these needs are surprisingly uncommon and undocumented in JQuery tutorials. For instance, there is a tendency to take action when a form is submitted, or when focus arrives on a field, rather than when focus leaves a field.

Reference:

Most useful:

http://www.overset.com/2008/07/31/jval-jquery-form-field-validation-plugin/ -- this has an example of number 1, taking action when a field loses focus.

http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to-another-input-field-with-jquery/ -- this is the simplest example of copying form input values from one field to another, most of our use case for #2 and #3

http://www.webinception.com/articles/view/copying_billing_and_shipping_address_information_with_jquery/ -- this has an example of moving inputted values from one form field to another, using a more complex method than we need to do this for all fields in a set (rather than for hard-coded field names)

http://rc3.org/2008/03/10/jquery-evangelism/ -- this also has an example of copying user-input data from one field to another, also with an extra complexity of deriving field names, in this case using string concatenation (which may be a useful example for our need to combine data)

Other

http://www.reynoldsftw.com/2009/01/top-10-jquery-plugins-for-form-usability/ see especially http://www.campbellsdigitalsoup.co.uk/about/default-value/

http://github.com/mudge/jquery_example/tree/master - another default value (example text) plugin

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm

HOWTO: Adding Jquery for better Usability on the contact form (just reminder pop-ups)

Resolution