Element index of form.elements

[TSBenke]

I've got a performance problem in IE. I'm working on a hotkey function and instead of using TAB and SHIFT+TAB the user will be able to use 4 buttons to go up/down/left/right.

When going left or right I fetch all elements in the form, searches for the selected field (I get it from the event) and selects the field with the lesser index of form.elements if the user presses left etc.

This works great but the problem is that I got many elements so the system isn't responsive enough when its in the middle of the form.

Is there a way to get the index in form.elements of the field of the event instead of searching for it? I can't use a tabindex as many elements are created dynamicly.

Here is a simplified version of my code:

var bookingForm = document.getElementById("bookingForm");
for (var elementIndex = 0; elementIndex < bookingForm.length; elementIndex++) {
	if (bookingForm.elements[elementIndex] == target) {
		var indexNavigation = 0;
		if (key == 100) {	//if the left button was pressed
			indexNavigation = -1;
		}
		else if (key == 102) {	//if the right button was pressed
			indexNavigation = 1
		}
		
		var nextElementIndex = elementIndex + indexNavigation;
		var nextElement = bookingForm.elements[nextElementIndex];
	
		...
}

 

[BillyRayPreachersSon]

Is this something that needs to be cross-browser? If not, and you're fine with IE-only (for example, if it is running on an intranet, etc), then you might try investigating the sourceIndex property:

http://msdn.microsoft.com/library/d...or/dhtml/reference/properties/sourceindex.asp

While it gives the index of an element within the document.all collection, the form elements should still have indexes relative to each other, I would have thought.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[BillyRayPreachersSon]

Hmm... or you could use DOM methods... for example, this would find the next form element from any given one:

var el = someFormElement.nextSibling;
while (el.tagName.toLowerCase() != 'input') el = el.nextSibling;

Obviously, there is no error checking in there (checking for select elements, or no more elements), so you would need to add that... but you get the idea, I'm sure.

The while statement is used to skip over text nodes, and other non-input elements. You can use previousSibling to go backwards, too.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[TSBenke]

Thanks for the tip! I'll check out sourceIndex. It is not the same index I wanted as its for document.all but maybe if I filter out input/select/textareas it will work as well. Hope it will be faster than my current solution.

Yes, this part of the system needs only to be for IE.

Unfortunately I can't use nextsibling as my elements lies within a table and I want it to go to the first element of the next row of I'm on the last element of the previous row.

 

[tsuji]

TSBenke,

The main thing is that ie event object exposes the srcElement, whereas ff/nn through target. If the sourceIndex is not the most convenient numbering to work with, you can sure use your naming convention to facilitate the moving around the element collection within a form. Use for instance:
[tt]
var sname=event.srcElement.name
'or
var sid=event.srcElement.id
[/tt]
to parse out the numbering system coded in name or id of the element.

- tsuji

 

[TSBenke]

Thanks for the tip, tsugi!
Unfortunately I've many elements with the same name to categorize them and while some have an id most other don't. And as I create many new elements dynamicly its difficult to work with id.

 

[tsdragon]

Unless the structure of your document is going to change dynamically, store to information about the document stucture in an array and search that each time instead of the document structure itself. It will probably be a lot faster.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.