/    Sign up×
Community /Pin to ProfileBookmark

Auto Tab function using tabindex

Copy linkTweet thisAlerts:
Apr 16.2003

Hi,

I’m somewhat familiar with JS but I have a problem I can’t solve. I have an “auto tab” function that will automatically tab to the next tabindex value. I do this because the fields aren’t necessarily in any logical order and I don’t want to hard code the next field because it could very well change in the future.

The function works fine on small pages with a dozen or so fields, however, I have some pages that are quite large and if you look at my code you see that I’m searching the entire page which makes it very slow. Are there any better solutions? Thanks, 61

[SIZE=1]function tab(current, n){
var obj = null;
for (var i=0; i < document.phone.elements.length; i++) {
obj = document.forms[0].elements[i];
if (obj.getAttribute(“tabindex”) == (current.getAttribute(“tabindex”) + 1))
if (current.getAttribute && current.value.length == n)
obj.focus();
}
}

<form>
<input type=”text” name=”first” size=4 onKeyup=”tab(this, 3)” tabindex=1>
<input type=”text” name=”second” size=4 onKeyup=”tab(this, 3)” tabindex=2>
</form>[/SIZE]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisApr 16.2003 — Why not build an array onload sorted by tabIndex? Then you just take the current object's tabIndex, add 1 and then mod by array length to get the index for the next object.
Copy linkTweet thisAlerts:
@sixoneauthorApr 16.2003 — Thanks for the reply, I'll give that a try!
Copy linkTweet thisAlerts:
@sixoneauthorApr 22.2003 — Thanks for the help,

This fixed my original problem. However, now the load time for the initial entry into the page has increased dramatically. Is there another approach I could possibly take? Basically I need to elimate searching the entire page. Does JS provide some type of functionality to narrow down my search? For example, all my fields are arranged in tables. Can I get my current position and look at the fields (in <TD> tags) closest to it?

[SIZE=1]function loadTI(){

var obj = null;

var index = null;

for (var i=0; i < document.forms[0].elements.length; i++) {

obj = document.forms[0].elements[i];

index = obj.getAttribute("tabindex");

if (index > -1) {

arrayTI[index] = obj;

}

}

}[/SIZE][/QUOTE]
Copy linkTweet thisAlerts:
@gil_davisApr 22.2003 — [i]Originally posted by sixone [/i]

[B]now the load time for the initial entry into the page has increased dramatically.[/b][/quote]Probably should have expected that. JS is an interpreter - not the fastest way to do things.[b]Does JS provide some type of functionality to narrow down my search?[/b][/quote]If the form is that big, I hope [i]I[/i] never need to fill it out.[b]Can I get my current position and look at the fields (in <TD> tags) closest to it?[/B][/QUOTE]The newer browsers will allow you to walk through the DOM from any point. Look into nextSibling() and previousSibling().
Copy linkTweet thisAlerts:
@sixoneauthorApr 22.2003 — [i]Originally posted by gil davis [/i]

[B]If the form is that big, I hope [i]I[/i] never need to fill it out. [/B][/QUOTE]

Well, you actually don't have to fill out the entire form. The page returns X amount of records and the user decides which record(s) (normally just a few) that he wants to update. But I agree, implementing paging may be a better approach.

[B]

The newer browsers will allow you to walk through the DOM from any point. Look into nextSibling() and previousSibling(). [/B][/QUOTE]

OK, I'll look into it, thanks for your help!
×

Success!

Help @sixone spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...