Vertical tabbing in multi-column form?

Joseph_Sliker

Hi;

This may be more of an html question, but if I build a multi-column form, is there a way to have it behave such that the tab key will take the user VERTICALLY through the column inputs rather than horizontally?

Thanks.

bradgrafelman

You can modify the default tabbing order of the browser (assuming it allows/supports doing so)... see this section on the W3C website: 17.11.1 Tabbing navigation.

Joseph_Sliker

That was a BIG help! I was able to create appropriately sequenced tabindex values as part of the form construction script and it seems to work, but I have a couple of follow-up questions.

I don't undertand how to set the focus of the very first input where the user should start:

The form is on a page in a frame: think menu bar on the left and workpage on the right...the form is in the workpage (I know it's kind of old school, but that's how I know to do this stuff) When the workpage with form loads, how do I set the focus on the first tabindex with the lowest number (it won't always be zero as the tabindex numbers are based on various key values)

Here is a section of form code as it is right now

echo "<tr><th align=right>ROOM NUMBER</th>
<th align=left><input tabindex="11124" type="text" name="xDATA[1][1124]" value="" size="5"></th>
<th align=left><input tabindex="21124" type="text" name="xDATA[2][1124]" value="" size="5"></th>
<th align=left><input tabindex="31124" type="text" name="xDATA[3][1124]" value="" size="5"></th>
<th align=left><input tabindex="41124" type="text" name="xDATA[4][1124]" value="" size="5"></th>
</tr><tr bgcolor=red><td colspan=5 align=center><font color=white><b>(KEEP ALL DATA IN THE SAME COLUMN FOR EACH ROOM)</font></td></tr><tr>
<th align=right>Total Students</th>
<th align=left><input tabindex="11125" type="text" name="xDATA[1][1125]" value="" size="5"></th>
<th align=left><input tabindex="21125" type="text" name="xDATA[2][1125]" value="" size="5"></th>
<th align=left><input tabindex="31125" type="text" name="xDATA[3][1125]" value="" size="5"></th>
<th align=left><input tabindex="41125" type="text" name="xDATA[4][1125]" value="" size="5"></th>
</tr><tr>
<th align=right>Kindergarten </th>
<th align=left><input tabindex="11126" type="text" name="xDATA[1][1126]" value="" size="5"></th>
<th align=left><input tabindex="21126" type="text" name="xDATA[2][1126]" value="" size="5"></th>
<th align=left><input tabindex="31126" type="text" name="xDATA[3][1126]" value="" size="5"></th>
<th align=left><input tabindex="41126" type="text" name="xDATA[4][1126]" value="" size="5"></th>
</tr><tr>";

I'd like to automatically set the cursor at tabindex="11124" (first column, first row).

ALSO: This form often has quite a few rows that requires scrolling up and down, the scrolling down seems to follow the tabbing okay, BUT when the user gets to the end of the column and the next tab goes back up to the top of the second column, the page does not automatically scroll back up there. The user has to manually scroll. Is there a trick that will do this?

Thanks again.

bradgrafelman

The answer to both of your questions probably involves the use of Javascript (possibly some advanced Javascript for that second question), unless someone knows/sees something I'm missing.

For the first question... is the first value always going to be "11124" and it's just the location that might change? If so, that makes it fairly easy. If not, one solution I can think of would be to use some DOM functions (e.g. getElementsByTagName, assuming you're always working with "input" elements) to loop through all of the possible form entities to find the lowest tabindex. Example process:

Assume first entity found has lowest tabindex - copy the reference to this DOM object as well as the tabindex.
Check next object in the list - see if it has a lower tabindex than that which was last stored. If so, replace the object reference with a copy to this object instead.
Continue until the list of matching DOM objects has been exhausted. The stored reference now points to the object with the lowest tabindex - call this object's focus() method.

As far as the scrolling "trick"... when you tab to the field, did you try typing a character to see if the browser auto-scrolled so that the form entity was in view? If that doesn't work, I'm not sure what the best solution is... there's always the window.scrollTo(x,y) method, but as far as how one might determine what the best (x,y) coordinates to scroll to... that's probably not as easy. For a rough hack, you could probably do something like:

Attach a custom function to every form field's "onfocus" handler.
Have this function determine the entity's absolute position on the page (e.g. x,y coordinates... which probably translate into "left" and "top" values?).
Determine if the entity is already "in view"... check the window size and use the current scroll offset/position to generate a bounding box of page coordinates that can currently be viewed.
If the entity already lies within that bounding box.. great! No work to do. If not, use window.scrollTo() to bring the entity into view.

EDIT: I did warn that it might involve 'advanced' Javascript, didn't I? :p

Joseph_Sliker

Grrrrr.... I knew this "javascript" thing was going to come up. I've only done a couple of teeny tiny things with that (by rote...I have no idea how/why they actually work).

Thanks for the suggestions. I'll have a go at it.

BTW: The tabindex will NOT always be 11124: overall page creates the survey forms on the fly based on items in a MySQL table and I use the ordered item keys to supply values for tabindex (pre-pending them with the column number) ie.:

elseif($displayitems[RESP_TYPE]=="TINYTEXT_1LINEx4") {echo "<tr>
<th align=right>$displayvalues[ITEM_TEXT]</th>
<th align=left><input tabindex=\"1$srv_itemid\" type=\"text\" name=\"xDATA[1][$srv_itemid]\" value=\"\" size=\"5\"></th>
<th align=left><input tabindex=\"2$srv_itemid\" type=\"text\" name=\"xDATA[2][$srv_itemid]\" value=\"\" size=\"5\"></th>
<th align=left><input tabindex=\"3$srv_itemid\" type=\"text\" name=\"xDATA[3][$srv_itemid]\" value=\"\" size=\"5\"></th>
<th align=left><input tabindex=\"4$srv_itemid\" type=\"text\" name=\"xDATA[4][$srv_itemid]\" value=\"\" size=\"5\"></th>
</tr>";}

IF ANYONE ELSE HAS A MORE HTML-ish SORT OF IDEA, I'D BE GLAD TO HEAR IT!

bradgrafelman

Actually I just thought of something different... you are the one generating the tabindex values, so don't you know exactly which element has the lowest tabindex? Even if you think the answer is 'no', don't you see how you could figure out this information?

Once you figure that out, you could simply output some simple Javascript code that calls that entity's focus() method.

Joseph_Sliker

Okay. I learned some more things that helped:

The maximum tabindex value allowed in html is 32767. I am using that value for the submit button so that will always be the last tab position.

In that a lot of my itemID numbers are in the thousands (I'm using the primary key for the items so I'm clear on which item a response belongs to) my 4th column does not work, so I improved the method of generatating the tabindex values (I created a $focusrow counter that starts at 100 and gets incremented every time a form row ends. So now the code goes like this to produce functional tabindex values:

$focusrow=10; // creates a value that will help create tabindex value (as long as rows don't exceed 99) starts at 10 to avoid order confusion when column value is prepended 
// FIRST VALUE SHOULD ALWAYS BE 10! (I think tabindex ignores leading zeros) 

...
elseif($displayvalues[RESP_TYPE]=="TINYTEXT_1LINEx4") {echo "<tr>
<th align=right>$displayvalues[ITEM_TEXT]</th>
<th align=left><input tabindex=\"0$focusrow\" type=\"text\" name=\"xDATA[1][$srv_itemid]\" value=\"\" size=\"5\"></th>
<th align=left><input tabindex=\"1$focusrow\" type=\"text\" name=\"xDATA[2][$srv_itemid]\" value=\"\" size=\"5\"></th>
<th align=left><input tabindex=\"2$focusrow\" type=\"text\" name=\"xDATA[3][$srv_itemid]\" value=\"\" size=\"5\"></th>
<th align=left><input tabindex=\"3$focusrow\" type=\"text\" name=\"xDATA[4][$srv_itemid]\" value=\"\" size=\"5\"></th>
</tr>"; $focusrow++;}
...

I also noticed that the focus DOES bounce back to the top item row (at least in IE) the prior code errors made this behavior inconsistent, but now it seems to work fine.

Now I just have to figure out how to get the cursor into position at tabindex=10 each time the page loads.

bradgrafelman

Joseph Sliker wrote:
Now I just have to figure out how to get the cursor into position at tabindex=10 each time the page loads.

Not sure what you mean by '10'... shouldn't it be 100 (or 64, if your browser decides to be an arse and parse 0100 as an octal number :p)?

Either way, it sounds like you can now easily determine which entity is the "first" entity as you're generating the HTML, right? If so, for that entity, give it a unique id... e.g. "firstField". Then, you could do something as simple as:

<script type="text/javascript">
window.onload = function () {
    document.getElementById('firstField').focus();
}
</script>