Getting Index of a Form Element

[Rkeast]

Hi,

I'm trying to determine a better method of finding the index value of a form element. I need to find it because the JavaScript validation class has a function for validating a single form element, but it requires that the index number of the element in the form be passed in.

Currently I am accomplishing this by a function that I wrote which I call for each field I want to validate:

function getIndex(element)
{
  for (var i=0; i<document.thisForm.elements.length; i++)
    if (element == document.thisForm.elements[i])
      return i;
  return -1;
}

This works fine, however the other developer working on this and I don't really feel good about having to run this loop every for every field we want to validate.

I have looked into other methods of finding the index and I ran into the sourceIndex variable:

var ivIndex = document.thisForm.elements("foo").sourceIndex;

Now, this seems to do something however I am not sure whether it does what I actually want it to do. For example, when I run this against a field that I know should have a form index value of 7, I am getting 161... And when I run it against a field with an index of 10, I get 169. Not very intuitive as to what it is doing.

Anyway, if anyone knows any wizard hax tricks to getting the index of a field within the form element, let me know it would be greatly appreciated. :)

[hielo]

I need to find it because the JavaScript validation class has a function for validating a single form element, but it requires that the index number of the element in the form be passed in.

That is where I would concentrate my efforts instead. Since it is expecting a number, then I would modify it so that it can accept either a:
a) number - so it keeps working with whatever existing code you have
b) string - so you can pass an id to a specific element and using document.getElementById() you can obtain a reference to that element
c) an object - so that if you already have a node reference stored in some variable you just pass the reference directly.

[Rkeast]

Modifying it isn't possible I'm afraid. Since the code that we use for validation is a highly standardized and system-wide class, a change to it would be rather difficult to get pushed though.

My only option in regards to doing something like that would be to have custom validation in the page itself, however that isn't a path I really want to go down with this.

[hielo]

Since the code that we use for validation is a highly standardized and system-wide class

I thought so, that's why I suggested that you STILL keep the current functionality that is accepting a number, but instead IMPROVE it (add more features to it).

Other than that, you have no choice but to iterate through the nodes as you are already doing in your original post. Since the sourceIndex is supported only by IE, then I suggest you modify your code so that it iterates ONLY when the browser is NOT IE:

function getIndex(element)
{
  if( typeof(element.sourceIndex)!="undefined" )
   return element.sourceIndex;

  for (var i=0; i<document.thisForm.elements.length; i++)
    if (element == document.thisForm.elements[i])
      return i;

  return -1;
}

[Rkeast]

The other developer working on this just found a great solution to this.

We still loop through the form elements on the page, but just once.

When you click submit, before it begins validating the fields I run:

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

Then when I want to get the index of that element, I just reference it by the index variable I added to the element. Easy and simple :)

[hielo]

better yet, why not make it document.thisForm.elements[i].sourceIndex = i; so that it is "cross-browser compatible". That way in your getIndex() function you can still keep

if( typeof(element.sourceIndex)!="undefined" )
return element.sourceIndex;

as I suggested earlier. That way if you are using IE it will NEVER have to iterate, but if you are using some other browser will iterate at most once!

[hielo]

function getIndex(element)
{
	if( typeof(element.sourceIndex)=="undefined" )
	{
 		for (var i=0; i<document.thisForm.elements.length; i++)
		{
			document.thisForm.elements[i].sourceIndex=i;
		}
	}
return typeof(element.sourceIndex)!="undefined" ? element.sourceIndex : -1;
}