Go Back   Computer Forums > Web Design | Website Development > Web Programming
Join Computer forums Today

Thread Tools Search this Thread Display Modes
Old 04-05-2007, 09:54 AM   #1
In Runtime
Daeva's Avatar
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Javascript jump form elements

Just thought i'd share this.
Okay, I was playing around in javascript for a project i'm working on and I came upon a problem, which I have come accross before. Here is the problem:

4 form fields, each having a maxlength of 3 and a minimum length of 1.
The fields are IP address octets. for example.
each of the 4 form fields holds 1 octet(up to 3 digits).
But it's a pain to have to type in 1, 2, or 3 digits and then hit the tab key to go to the next field, or to use the mouse to get to the next field. Sooo, I used a little trial an error and some javascript to make the form automatically send you to the next field. Here is the full html page i used to test it.

<?xml version="1.0" charset="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-us" xml:lang="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;" />
<title>Test form elements</title>
<script type="text/javascript">
function nextElement(obj, e) {
var replaceText = new String("");
document.getElementById("outputSpan").innerHTML = "You are in " + obj.id.toString() + ": " + e.keyCode + "Index number " + getIndex(obj); // used for debugging
	if (navigator.appName == "Opera" && navigator.appVersion >= "9") {
	 if (e.keyCode == 78 || e.keyCode == 46) {
	 replaceText = obj.text;
	 obj.text = replaceText.replace("."," ");
	 } else {
	 } // end else
	} else {
	 if (e.keyCode == 110 || e.keyCode == 190) { //the . symbol has 2 different ways of being pressed on standard keyboards.
	 replaceText = obj.value;
	 obj.value = replaceText.replace("\.","");
	 document.forms[0].elements[getIndex(obj)+1].focus(); // set focus to next element
	 } // end if
	} // end if
} // end function nextElement
function getIndex(input) { // get index searches your form for a match
	 Javascript's API doesn't provide a method(that is supported accross multiple platforms) to return the index of the element we are talking about. So this method takes a brute force approach to finding the element's index, which we will use to skip to the next element.
	var index = new Number(0);
	for(index = 0; index < document.forms[0].length; index++) { // while we still have form elements
	 if (document.forms[0].elements[index] == input) {
	 return index;
	 } // end if
	} // end for loop
} // end function getIndex
<form id="form1" name="form1" method="POST" action="">
<div id="mainDiv">
	<table id="mainTable" name="mainTable">
		<td colspan="2" valign="bottom" align="center" style="text-align: center;">
		 Testing auto-tab form elements
		<td colspan="1" valign="top" align="left">
		 <label for="field1">Fields</label>
		<td colspan="1" valign="top" align="left">
		 <input id="field1" name="field1" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
		 <input id="field2" name="field2" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
		 <input id="field3" name="field3" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
		 <input id="field4" name="field4" type="text" style="width: 30px;" maxlength="3" onkeyup="nextElement(this, event);" />
		<td colspan="2" valign="top" align="left">
		 <span id="outputSpan"></span>
The javascript works in I.E 6+, Firefox 1.5+, and Opera 9+ The only problem with opera is I can't get the . to be removed from the text field. For example, lets say you enter 124 in the first box and 12 in the second box. the second box will still contain a period in Opera(still working on fixing that). Otherwise, it's a pretty stable and usefull script. You can customize it to "auto-tab" to the next form field using any character.
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
Daeva is offline   Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

All times are GMT -5. The time now is 06:31 AM.

Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2016, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0