arzoo
10-28-2006, 12:02 AM
I'm trying to get a form to move through the text fields in a form wherein the numbering of the fields is specified by tabindex. The prototype i'm using specified the number of the field right beside the field for testing purposes.
The script works when there in no table incorporated, however, once i inserted the fields into a table i get an error in the line (getting a null value returned):
obj = document.forms[0].elements[i];
when trying to get the elements into a variable. Basically, I try to loop through all the form's text fields and see if the tab index is the next in line. using
for (var i=0; i < document.theForm.length+1; i++)
However, i'm not too sure if document.theForm.length gets the correct value since document.forms[0].elements[i] dosnt seem to be able to get the proper value.
How do you get the fix the code when the input fields are within a table in order for the script to work properly?
Thanks... the code is placed below:
=============================
<html>
<head>
<script type="text/javascript">
function tab(current, n)
{
var obj = null;
for (var i=0; i < document.theForm.length+1; i++)
{
obj = document.forms[0].elements[i];
if (obj.getAttribute("tabindex") == (current.getAttribute("tabindex") + 1))
if (current.getAttribute && current.value.length == n)
obj.focus();
}
}
</script>
</head>
<body>
<form name="theForm" id="theForm">
<table border=1>
<tr><td>
<input type="text" name="six" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=3> 3<br>
</td></tr>
<tr><td>
<input type="text" name="five" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=5> 5<br>
</td></tr>
<tr><td>
<input type="text" name="four" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=4> 4<br>
</td></tr>
<tr><td>
<input type="text" name="three" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=6> 6<br>
</td></tr>
<tr><td>
<input type="text" name="two" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=2> 2<br>
</td></tr>
<tr><td>
<input type="text" name="one" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=1> 1<br>
</td></tr>
</table>
</form>
</body>
</html>
The script works when there in no table incorporated, however, once i inserted the fields into a table i get an error in the line (getting a null value returned):
obj = document.forms[0].elements[i];
when trying to get the elements into a variable. Basically, I try to loop through all the form's text fields and see if the tab index is the next in line. using
for (var i=0; i < document.theForm.length+1; i++)
However, i'm not too sure if document.theForm.length gets the correct value since document.forms[0].elements[i] dosnt seem to be able to get the proper value.
How do you get the fix the code when the input fields are within a table in order for the script to work properly?
Thanks... the code is placed below:
=============================
<html>
<head>
<script type="text/javascript">
function tab(current, n)
{
var obj = null;
for (var i=0; i < document.theForm.length+1; i++)
{
obj = document.forms[0].elements[i];
if (obj.getAttribute("tabindex") == (current.getAttribute("tabindex") + 1))
if (current.getAttribute && current.value.length == n)
obj.focus();
}
}
</script>
</head>
<body>
<form name="theForm" id="theForm">
<table border=1>
<tr><td>
<input type="text" name="six" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=3> 3<br>
</td></tr>
<tr><td>
<input type="text" name="five" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=5> 5<br>
</td></tr>
<tr><td>
<input type="text" name="four" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=4> 4<br>
</td></tr>
<tr><td>
<input type="text" name="three" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=6> 6<br>
</td></tr>
<tr><td>
<input type="text" name="two" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=2> 2<br>
</td></tr>
<tr><td>
<input type="text" name="one" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=1> 1<br>
</td></tr>
</table>
</form>
</body>
</html>