Name Capitalization In Forms

When folks fill out your forms, sometimes they type their name in all lowercase letters. And sometimes they type them all caps.

The JavaScript accompanying this article will adjust capitalization of names (actually, the content of any form field you apply to it) so the first letter of each word is capitalized and the rest are lowercase.

With automated software as prevalent as it is today, people may accept their names incorrectly capitalized. Probably they are more tolerant than before so much automation.

Nevertheless, if she types her name as "jane doe" and receives an auto-response addressed to "Jane Doe," your prospective customer will notice. You win kudos.

When you correctly capitalize names, even when incorrectly typed into your forms, you show you care enough to make your automated software friendly.

The JavaScript and instructions are below. But first, a caveat. Some names correctly begin with a lowercase letter. The first word of the two-word family name "van Dongen" is an example. Another caveat is names like McLeod that have a capital letter within the name.

This JavaScript does not differentiate. It's either all words of a name are processed the same or no words are processed at all.

Here is the JavaScript. Paste it above or below your form.

<script type="text/javascript">
// This JavaScript makes capitalizes the initial letter 
//   of all words and the rest of the letters lowercase.
// It also removes extra space between words.
//
// Two values need to be specified, the form name and the 
//   field name to be processed.

var FormName = "myform";
var FieldName = "name";

function CapitalizeNames() {
var ValueString = new String();
eval('ValueString=document.'+FormName+'.'+FieldName+'.value');
ValueString = ValueString.replace(/ +/g,' ');
var names = ValueString.split(' ');
for(var i = 0; i < names.length; i++) {
   if(names[i].length > 1) {
	   names[i] = names[i].toLowerCase();
	   letters = names[i].split('');
   	letters[0] = letters[0].toUpperCase();
	   names[i] = letters.join('');
	   }
	else { names[i] = names[i].toUpperCase(); }
	}
ValueString = names.join(' ');
eval('document.'+FormName+'.'+FieldName+'.value=ValueString');
return true;
}
</script>

The example form, below, has the form and field names the JavaScript is looking for.

When ready to implement with your own forms, modify the two indicated lines of JavaScript for the form name and field name to be processed.

Here is an example form you can practice with:

<form method="POST" name="myform" action="/cgi-bin/script.pl">
Your name: <input type="text" name="name">
<input type="submit" value="Click" onclick="return CapitalizeNames()">
</form>

Here is a demonstration. Play with it. See how it works.

Note:
For the demo, I used the code from the example form, above, but changed the type="submit" to type="button". That keeps the form from submitting.

Names are personal. Correct capitalization might be a little thing. But it can mean a lot.

Will Bontrager