Which input triggered onChange

[brian.gaber]

I have a table inside a form and each row of the table has a similar
<SELECT ... statement, only the name and id is different.

Here is one example:

<select name="status11" onchange="status_OnChange()" id="status11">

<option selected="selected" value="Active">Active</option>
<option value="Correction">Correction</option>
<option value="Audit">Audit</option>
<option value="Hold">Hold</option>
<option value="Complete">Complete</option>

How can I determine which <SELECT ... triggered the onchange?

 

[Doug Gunnoe]

I have a table inside a form and each row of the table has a similar
<SELECT ... statement, only the name and id is different.

Here is one example:

<select name="status11" onchange="status_OnChange()" id="status11">

<option selected="selected" value="Active">Active</option>
<option value="Correction">Correction</option>
<option value="Audit">Audit</option>
<option value="Hold">Hold</option>
<option value="Complete">Complete</option>

How can I determine which <SELECT ... triggered the onchange?

you can use the event object to give you this information.
Different browsers have different ways of doing this.

in firefox you would need to set an event handler like

document.onchange = status_OnChange;

then..

status_OnChange(e){
if(e.target.id == "status11")
stuff...;
else if(e.target.id == "status12")
stuff;
}

in IE, you can reference the event object without the need to set an
event handler

status_OnChange(){
if(event.srcElement.id == "status11")
stuff...;
else if(event.srcElement.id == "status12")
stuff;
}

So test for event.srcElement or e.target and use the one that's valid.

I think there are a lot of caveats and exceptions and complexities
when dealing with the event object in JavaScript, so take my example
with a grain of salt.

 

[Thomas 'PointedEars' Lahn]

you can use the event object to give you this information.
Different browsers have different ways of doing this.

The `change' event does not bubble in the MSHTML DOM, but it does in
the W3C DOM. It therefore a bad idea to use event bubbling here.

in firefox you would need to set an event handler like

document.onchange = status_OnChange;

No, you would not. That's incredibly bad style.

then..

status_OnChange(e){

Syntax error #1.

if(e.target.id == "status11")
stuff...;
else if(e.target.id == "status12")
stuff;
}

in IE, you can reference the event object without the need to set an
event handler

status_OnChange(){

Syntax error #2.

if(event.srcElement.id == "status11")
stuff...;
else if(event.srcElement.id == "status12")
stuff;
}

In general, yes. Nonsense here.

So test for event.srcElement or e.target and use the one that's valid.

Not necessary at all here.

I think there are a lot of caveats and exceptions and complexities
when dealing with the event object in JavaScript, so take my example
with a grain of salt.

And don't forget the pepper. Here's a better solution, works everywhere.
You may add more arguments in case you need them, or you may pass `this'
only and go from there.

function status_onChange(s)
{
switch (s.toLowerCase())
{
case "status11":
break;

case "status12":
break;

default:
}
}

<select onchange="status_OnChange(this.name)" name="status11">
...
</select>


PointedEars

 

[Bart Van der Donck]

<select name="status11" onchange="status_OnChange()" id="status11">

<option selected="selected" value="Active">Active</option>
<option value="Correction">Correction</option>
<option value="Audit">Audit</option>
<option value="Hold">Hold</option>
<option value="Complete">Complete</option>

How can I determine which <SELECT ... triggered the onchange?

<select onchange="alert(this.value)" size="1"
name="status11" id="status11">

 

[Bart Van der Donck]

   <select onchange="alert(this.value)" size="1"
    name="status11" id="status11">

Rereading the original question. My solution would be for the
triggered option, not for the select.

 

[brian.gaber]

The `change' event does not bubble in the MSHTML DOM, but it does in
the W3C DOM. It therefore a bad idea to use event bubbling here.



No, you would not. That's incredibly bad style.



Syntax error #1.




Syntax error #2.


In general, yes. Nonsense here.


Not necessary at all here.


And don't forget the pepper. Here's a better solution, works everywhere.
You may add more arguments in case you need them, or you may pass `this'
only and go from there.

function status_onChange(s)
{
switch (s.toLowerCase())
{
case "status11":
break;

case "status12":
break;

default:
}
}

<select onchange="status_OnChange(this.name)" name="status11">
...
</select>

I forgot to mention that I will not know the id names in advance. The
table is dynamic so the id will always have a name format of "status"
concatenated with an integer.

Thanks.

Brian

 

[Thomas 'PointedEars' Lahn]

I forgot to mention that I will not know the id names in advance.

You don't have to.

The table is dynamic so the id will always have a name format of "status"
concatenated with an integer.

Sorry, you are not making sense. What are you *actually* trying to do?


Please trim your quotes, see
http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1Trim


PointedEars

 

[SAM]

(e-mail address removed) a écrit :

I forgot to mention that I will not know the id names in advance. The
table is dynamic so the id will always have a name format of "status"
concatenated with an integer.

and ? where is the problem ?

since you do :

<form name="me">
<table>
<tr><td>
<select name="unknown_1" onchange="status_OnChange(this);">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</td></tr>
<tr><td>
<select name="unknown_2" onchange="status_OnChange(this);">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</td></tr>
<tr><td>
<select name="unknown_3" onchange="status_OnChange(this);">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</td></tr>
</table>
</select>
</form>

<script type="text/javascript">
function status_OnChange(what) {
var txt = 'name of form = '+what.form.name;
txt += '\nname of select = '+what.name;
txt += '\noption value = '+what.options[what.selectedIndex].value;
txt += '\noption text = '+what.options[what.selectedIndex].text;
alert(txt);
document.forms[what.form.name].elements[what.name].style.borderColor='red';
what.style.borderWidth = '3px';
var num = what.name.substring(what.name.indexOf('_')+1);
alert('it is the select #'+num);
}
</script>


Perhaps didn't I understand the question ?