User login

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

Searched words: 
jquery combine form fields first name last name JQuery copy address fields Jquery prefill form values from other form values jquery fill form field from other fields drupal jquery autofill fields from other CCK fields drupal jquery fill fields from other CCK fields HTML forms javascript clone and remix values

Comments

gmail style link

Hi

Good work on getting these links together. Maybe I am missing some obvious logic in JQuery/Js but I want to setup a simple link form so a user can save a link. There are two fields of importance here the link URL and the link Name. I want to run it like google mail. If the link URL is updated then the link Name is automaticaly filled as a suggestion but once you type your own edit in the link Name it recognizes this and won't change it any more if you change the URL. I have the Name updating no problem but I can't figure out how to fix it if I edit the name so that these changes won't be lost if the URL is changed. It seems like a common thing to do but I looked around Google for a while and couldn't find anything. Any advice would be much appreciated.

Thanks

Will

re:gmail style link

Hey don't worry about finding it out. I figured out how to do it. Just had to step back and think about the logic. Basically the URL still updates the NAME unless the name has been changed by the user. To do this when the user changes the NAME the js adds a class to that input to say userEdited. When the URL is updated it always looks for lack of userEdited class before changing NAME. Fairly simple really. May be of someuse to somebody.

Will

Oh and no offence but your CAPTCHA is a reall pain, keeps on blocking me out, not sure what I am doing wrong but obviously something.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.