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.

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:

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.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Name Capitalization In Forms

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Name Capitalization In Forms

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions