Auto-text field switching [Archive]

View Full Version : Auto-text field switching

SYMBIO

11-21-2002, 09:59 AM

Hi, I have a form (theres a surprise!) and it has text fields. I am getting people to enter a date. so the date is split into 3 textfields. DD/MM/YY. Basically, all i want to do is autotab after 2 characters have been entered into the textfield. i have done the customary maxlength="2" thing.

Help?

glenngv

11-21-2002, 10:10 AM

http://codingforums.com/showthread.php?s=&threadid=2822

but to make the code posted in that thread works cross-browser, use the keyword this to reference the current element as opposed to just the element name (which only works in IE):

<form name="myForm">
<input type="text" name="t1" maxlength="3" size="3" onclick="select()" onKeyUp="advance(this,'t2')">
<input type="text" name="t2" maxlength="3" size="3" onclick="select()" onKeyUp="advance(this,'t3')">
<input type="text" name="t3" maxlength="3" size="3" onclick="select()" onKeyUp="advance(this,'t4')">
<input type="text" name="t4" maxlength="3" size="3" onclick="select()" >
</form>

and you can optimize the script like this:

<script language="JavaScript">

</script>

SYMBIO

11-21-2002, 11:10 AM

cheers! it works fine. but now im working on a reversal. if currentfield = -1? dunno.

beetle

11-21-2002, 02:38 PM

I prefer this method....same setup just a LITTLE different...

<script language="JavaScript">

</script>

That way the 'tabbing' changes with the maxlength of each field, and not a value hard-coded into the function ;)

SYMBIO

11-26-2002, 06:37 PM

for raj

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SONY HOMEPAGE</title>

<script language=javascript>

function doMoveBrowser(form) {
parent.location.href=form.list.options[getSelectedValue()].value; }

function getSelectedValue() {
return document.form1.list.selectedIndex }

function showURL(form) {
form.TextBox.value = form.list.options[getSelectedValue()].value; }
</script>

<script type="text/javascript">
function confirmm() {
return (confirm("Press OK to go to this page."));
}
</script>

<script src="scrolling.js"></script>

<link rel="stylesheet" href="sony.css" type="text/css" />

</head>

<body bgcolor="#FFFFFF" OnLoad="tmx1a=window.setTimeout('scroll_status(100)',50);"
<b><h1 align="center">SONY</h1></b>
<form name=form1>
<select name=list onChange=showURL(this.form)>
<option selected value=0>Where do you want to go today?
<option value=http://www.yahoo.com>Yahoo
<option value=http://den.usc.edu>Distance Education Network
<option value=http://cs.usc.edu>Computer Science at USC
</select>
<input type=button value=Go onClick=doMoveBrowser(this.form)>
<input type=reset value=Reset>
<input type=text name=TextBox size=40>
</form>

<br /><br />
<a onclick="return confirmm()" href="page2.html">Page 2</a> <a onclick="return confirmm()" href="page3.html">Page 3</a> <a onclick="return confirmm()" href="page4.html">Page 4</a>
</body>
</html>