same name array

**Michael Winter** · Jul 23 '05, 10:17 AM

Re: same name array

On 9 Apr 2004 16:23:54 -0700, Jon W <gosubi@yahoo.c om> wrote:
[color=blue]
> I have a db table like list in a form. All the buttons have the same
> name. How do I know what index the button has in the button array
> onclick.
>
> <button name="shed" value="Edit2" onclick="Ed_SQL (this.x=1)">Edi t
> </button>
> <input name="shist" type="text" onclick="GO_SQL (this.value)"
> value="select * from table2" size="50">
>
> <button name="shed" value="Edit3" onclick="Ed_SQL (this)">Edit
> </button>
> <input name="shist" type="text" onclick="GO_SQL (this.value)"
> value="select * from table3" size="50">[/color]

Pass a reference to the button to the function, then compare the
references:

function getIndexOf( ref, group ) {
for( var i = 0, n = group.length; i < n; ++i ) {
if( group[ i ] == ref ) {
return i;
}
}
}

function Ed_SQL( originalParam, button ) {
var index = getIndexOf( button, button.form.ele ments[ 'shed' ]);
// ...
}

<button name="shed" value="Edit2"
onclick="Ed_SQL (this.x=1,this) ">Edit</button>

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

**Jon W** · Jul 23 '05, 10:28 AM

Re: same name array

Thanks for the reply, Michael.

I've synthisized my question down to this:
Is there a more direct route than this to find the index of a button onclick?
(without marking up the HTML)

<script language="JavaS cript" type="text/javascript">

function getInd(elem){

len = elem.form.eleme nts[ elem.name ].length;

for (i=0; i < len; i++){

if (elem.form.elem ents[ elem.name ][i] == elem){

alert (elem.name + " index is " + i);
}
}
}
</script>
<body>
<form>

<button name="shed" value="Edit"
onclick="getInd (this)">Edit</button>

<button name="shed" value="Edit"
onclick="getInd (this)">Edit</button>

<button name="shed" value="Edit"
onclick="getInd (this)">Edit</button>
</form>

Michael Winter <M.Winter@bluey onder.co.invali d> wrote in message news:<opr6h6z7c v5vklcq@news-text.blueyonder .co.uk>...[color=blue]
> On 9 Apr 2004 16:23:54 -0700, Jon W <gosubi@yahoo.c om> wrote:
>[color=green]
> > I have a db table like list in a form. All the buttons have the same
> > name. How do I know what index the button has in the button array
> > onclick.
> >
> > <button name="shed" value="Edit2" onclick="Ed_SQL (this.x=1)">Edi t
> > </button>
> > <input name="shist" type="text" onclick="GO_SQL (this.value)"
> > value="select * from table2" size="50">
> >
> > <button name="shed" value="Edit3" onclick="Ed_SQL (this)">Edit
> > </button>
> > <input name="shist" type="text" onclick="GO_SQL (this.value)"
> > value="select * from table3" size="50">[/color]
>
> Pass a reference to the button to the function, then compare the
> references:
>
> function getIndexOf( ref, group ) {
> for( var i = 0, n = group.length; i < n; ++i ) {
> if( group[ i ] == ref ) {
> return i;
> }
> }
> }
>
> function Ed_SQL( originalParam, button ) {
> var index = getIndexOf( button, button.form.ele ments[ 'shed' ]);
> // ...
> }
>
>
> <button name="shed" value="Edit2"
> onclick="Ed_SQL (this.x=1,this) ">Edit</button>
>
> Mike[/color]

**Michael Winter** · Jul 23 '05, 10:28 AM

Re: same name array

On 23 Apr 2004 12:06:00 -0700, Jon W <gosubi@yahoo.c om> wrote:
[color=blue]
> I've synthisized my question down to this:
> Is there a more direct route than this to find the index of a button
> onclick?
> (without marking up the HTML)[/color]

There is no direct route to finding the index of a control. That is, there
are no properties or methods that will return the control's ordinal.

As for avoiding the need for marking-up intrinsic events, you can add
event listeners programatically . For example[1],

function addListeners( group, type, listener ) {
for( var i = 0, n = group.length; i < n; ++i ) {
group[ i ][ type ] = listener;
}
}

...

addListeners(
document.forms[ 0 ].elements[ 'shed' ],
'onclick',
function() {
getInd( this );
});

This uses the HTML you posted in the previous message. It would either
have to be called "on load", or in a script block placed after all "shed"
elements.
[color=blue]
> <script language="JavaS cript" type="text/javascript">[/color]

Specifying the (required) type attribute makes the language attribute
unnecessary. Moreover, language is deprecated and should no longer be used.
[color=blue]
> function getInd(elem){
>
> len = elem.form.eleme nts[ elem.name ].length;
>
> for (i=0; i < len; i++){[/color]

You should *always* use the var keyword to declare variables in
functions[2]. If you omit the keyword, the variables will become global
and you'll pollute the global namespace.
[color=blue]
> if (elem.form.elem ents[ elem.name ][i] == elem){
>
> alert (elem.name + " index is " + i);
> }
> }
> }[/color]

A more efficient implementation would be:

function getInd( elem ) {
var group = elem.form.eleme nts[ elem.name ], len = group.length;

for( var i = 0; i < len; ++i ) {
if( group[ i ] == elem ) {
alert( elem.name + ' index is ' + i );
}
}
}

[snip]

Mike

Please don't top-post.

[1] This example could be simplified, but it might confuse the OP.
[2] The obvious exception is when you want to declare variables, but even
then, I'd declare the variable in global scope with var.

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

same name array

same name array

Comment

Comment

Comment