10 Years in Open Source!

Just realized this the other day and I can’t believe its been 10 years since I first released an open source project of my own.   April 21, 2000.

My first contribution to open source: http://www.ticalc.org/archives/files/fileinfo/125/12502.html

This goes way back to my days in TI calculator development in high school, who would have known that I’d still be passionately pursuing the same thing.  Wow an entire decade has passed and its crazy to think of everything I’ve developed since then.

Flash forward to today, April 21 2010, and my newest focus in open source has been with the use of the WordPress platform (something that didn’t even exist at the release of my calculator software).

As I continue to move forward sharing and contributing and learning from the open source community I couldn’t be any happier doing what I love the most.

I don’t plan on stopping any soon, for this is just the beginning…

Automatically progress through form fields for phone, date and social security number input using Javascript

Scenario:
You want your users to enter a phone or social security number with 3 separate web forms, but you don’t want the user to hit [Tab] to progress to the next form field.  Have you ever noticed on some forms that as you type the numbers it automatically moves you to the next form box?  Here’s a little javascript technique to achieve this functionality on your site.

Here’s an example:
Enter your phone:

Did you notice how as you entered your phone number it automatically moved to the next form field box for you?

Here’s how you can do this:

Add the following Javascript code below to the head of your site:

1
2
3
4
5
6
7

<script type="text/javascript">
function autoFormAdvance(afterNumChars,currentFormId,nextFormId) {
	if(document.getElementById(currentFormId).value.length==afterNumChars) {
		document.getElementById(nextFormId).focus();
	}
}
</script>

The next step is to create your form elements. Each of these form elements must have an id attribute to identify them to the javascript.

Here’s an example of HTML code:

1
2
3

<input type="text" onkeyup="autoFormAdvance(3,'areaCode','phonePre')" id="areaCode" maxlength="3" size="3"/>
<input type="text" onkeyup="autoFormAdvance(3,'phonePre','phoneSuf')" id="phonePre" maxlength="3" size="3" />
<input type="text" id="phoneSuf" maxlength="4" size="4"/>

If you notice in the code above, the autoFormAdvance function is being called upon an onKeyUp action for that form element.

There are 3 values the autoFormAdvance function takes:

• afterNumChars – This is the number of characters it will take to move to the next form field
• currentFormId - This is the current form ID
• nextFormId - This is the form ID that you want to automatically progress too

Notice you don’t need to add the action on the last form element since, at this point, you’ve completed entering the data.

Further Suggestions:

• Set the maxlength of each form field to truly limit the number of characters this field can hold
• Set the six of each form field to match the length of the input. This will help save space and make your form look nicer.