How to get index of textfield array in the form by using Javascript?

Question

I have a form with dozen of textfield elements. Any change of their values shall execute Javascript function. And until now I know what I shall to do, but I can't detect index of textfield that triggered function. I tried some solution I saw here & there but wasn't successful.

<form action="" method="post" enctype="multipart/form-data" name="myforma1" target="_self" id="myforma1">
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />

...

<script>
function detect_it(oo)
{
alert('Index of triggered element is: ' + oo.index);
/* rest of code */
}
</script>

corentin · Answer 1 · 2013-06-30T09:10:38.467

1

You probably shouldn't give all your inputs the same name and id.

However, you can still look for the parent node, then iterate over the parent's children until you found your node to retrieve its index.

Try this getIndex() function:

<script>
var getIndex = function (node) {
    for (var i =0;i<node.parentNode.children.length;i++) {
        if (node.parentNode.children[i] === node) {
            return i;
        }
    }
}
function detect_it(oo) {
    alert('Index of triggered element is: ' + getIndex(oo));
}
</script>

See this Fiddle: http://jsfiddle.net/LkJxV/

edit: corrected code (again) (thx @Felix)

edited Jun 30 '13 at 09:10

answered Jun 30 '13 at 08:20

corentin

679
1
6
17

This will never return true since one element is input and the other is form – raam86 Jun 30 '13 at 08:25
@raam86 I corrected my snippet – corentin Jun 30 '13 at 08:32
tried but got an error – Ludus H Jun 30 '13 at 08:33
Seems still not work. Add a working fiddle. – raam86 Jun 30 '13 at 08:41
`node.parentNode.length` is incorrect. – Felix Kling Jun 30 '13 at 08:49
Well, it works on firefox, and there: http://jsfiddle.net/p2UJL/, but i'll fix it – corentin Jun 30 '13 at 09:10

raam86 · Accepted Answer · 2013-06-30T17:34:53.857

0

Your problem here is that index is not a property of the element. It can have differnet indexes depending on context but you can try Try something like:

    function detect_it(oo){
     var inputs = document.getElementsByTagName('input')
     for (var i = 0 ; i<inputs.length ; i++){
        if(oo == inputs[i]{
          alert('Index of triggered element is: ' + i);
        }   
    }
    //enter code here
    }

edited Jun 30 '13 at 17:34

answered Jun 30 '13 at 08:11

raam86

6,785
2
31
46

Thanks raam86, your code seems like solution I wanted. Just small error was there, I corrected it and it now works in Chrome and FF. function detect_it(oo){ var inputs = document.getElementsByName('txtfield') for (var i = 0 ; i – Ludus H Jun 30 '13 at 16:46
@LudusH Nice to know . I corrected answer to reflect solution – raam86 Jun 30 '13 at 17:35

How to get index of textfield array in the form by using Javascript?

2 Answers2