...

View Full Version : problem tabbing through text inputs within table using tabindex



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>

brandonH
10-29-2006, 09:41 AM
is there a reason why you are using a table?

looks to me like you can make it without the table. I mean you are still using line breaks... which is all the table is doing when starting a new <tr>.

and forms dont like to intermingle with tables. If you do want a form within a table, put it in the table....


<table>
<tr>
<td>
<form>
<input type=text><br>
<input type=text><br>
<input type=text><br>
</form>
</td>
</tr>
</table>


as i ask above though, what is your purpose in using a table?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum