Change event do not trigger

[amit.2006.it]

Hi guys,

Is there any way to trigger a change event of select box in prototype/
javascript?

i have select box given below,
<select id='designation_id' name='designation_id'>
<option value=''>Select Designation...</option>
<option value='1'>Lecturer</option>
<option value='2'>Artist</option>
...
</select>

Now i attached a change event to above select box as
Event.observe("designation_id", "change", function()
{
alert(this.value);
});

Finally i tried to call change event of same select box in this way,
<input id='btn1' onclick="javascript:$('designation_id').value='1';$
('designation_id').change();" />
But It doest not work.

Please help me out...

--
With Regards
Amit Gharat
http://amitgharat.wordpress.com/

Not everyone can become a great programmer.
But a great programmer can come from anyone.

[T.J. Crowder]

Hi,

I don't think there's any cross-browser way to fire a native event.
With respect, though, you really shouldn't have to in the normal
case. Instead, create a function that does what you want to do when
the select box changes, have the change event handler call that
function, and call it directly when you want to "trigger" the event.
E.g.:

// Define the function that does the work
function updateDisplayOfFoo() {
// ...update the display of foo...
}

// Hook up an event handler that calls it
$('myselect').observe('change', function(event) {
updateDisplayOfFoo();
});

// Somewhere in your code, you may want to call it directly:
updateDisplayOfFoo();

If you're doing an app where several different unrelated bits of code
all need to be triggered in these situations, you probably want to
have that code register with a central handler rather than hooking the
'change' event on the select box. Alternately, though, you can create
a custom event that observers hook up to on the select box (instead of
the change event), and have both its change event and your code that
needs to trigger it fire the custom event. You can fire custom events
via Element#fire[1].

[1] http://prototypejs.org/api/element/fire

HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

On Apr 7, 5:56 am, "amit.2006.it" <amit.2006...@gmail.com> wrote:
> Hi guys,
>
> Is there any way to trigger a change event of select box in prototype/
> javascript?
>
> i have select box given below,
>     <select id='designation_id' name='designation_id'>
>         <option value=''>Select Designation...</option>
>         <option value='1'>Lecturer</option>
>         <option value='2'>Artist</option>
>         ...
>    </select>
>
> Now i attached a change event to above select box as
>    Event.observe("designation_id",  "change", function()
>    {
>          alert(this.value);
>    });
>
> Finally i tried to call change event of same select box in this way,
>   <input id='btn1' onclick="javascript:$('designation_id').value='1';$
> ('designation_id').change();" />
> But  It doest not work.
>
> Please help me out...
>
> --
> With Regards

> Amit Gharathttp://amitgharat.wordpress.com/

[codef0rmer]

Thanks T.J.,

It worked perfectly but can't we achieve the same thing by calling
onchange.

[T.J. Crowder]

Hi,

> It worked perfectly but can't we achieve the same thing by calling
> onchange.

I don't think so. The onchange attribute of elements is the DOM0
style of event handler assignment, where there can only be one
listener for the event. The mechanism provided by Element#observe
uses the more modern mechanisms browsers now supply (albeit in
different forms) that allow multiple handlers on the same event for
the same element. If you call the onchange attribute of the element,
the result will probably be implementation-dependant, but I suspect it
will only call the DOM0 handler in most implementations.

HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

[Marko Zabcic]

What about this script. I've used it in one project and it works as it
should.

http://github.com/kangax/protolicious/blob/e5091a8051d57d62ae54bb906b16435fa638d75d/event.simulate.js

- Marko