same name array

[Jon W]

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)">Edit
</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">

 

[Michael Winter]

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)">Edit
</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">

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.elements[ 'shed' ]);
// ...
}


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

Mike

 

[Michael Winter]

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)

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.

<script language="JavaScript" type="text/javascript">

Specifying the (required) type attribute makes the language attribute
unnecessary. Moreover, language is deprecated and should no longer be used.

function getInd(elem){

len = elem.form.elements[ elem.name ].length;

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

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.

if (elem.form.elements[ elem.name ] == elem){

alert (elem.name + " index is " + i);
}
}
}

A more efficient implementation would be:

function getInd( elem ) {
var group = elem.form.elements[ 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.