Dec

7

Fire the onchange event the browser independent way

Filed Under ColdFusion, HTML, JavaScript | 30 Comments


I have faced a whole of lot of issues trying to fire the html events, mostly the onchange event, from JavaScript. The situation was pretty simple. I modified the value of a text box from JavaScript and I now wanted to fire the onchange event programmatically. Tried a lot of solutions suggested. When I finally thought I had a solution that worked, the solution worked on one browser but failed to work on the other.

Now that I have figured out the way of getting this to work, thought of sharing it. It will surely help someone out there who is trying to look for a solution that works on all browsers. By the way, I have tested this on IE, FireFox and Safari and it seems to work fine.

On IE, firing an event is as simple as calling the fireEvent method on the html element by passing the name of the event to it.

Element.fireEvent(eventName)

txt.fireEvent(’onChange’);

On Gecko based browsers, there’s more work involved. First of all we need to create the event, initialize it and then finally dispatch it.

Step 1: Create the event

var evt = document.createEvent(’HTMLEvents’);

Step 2: Call initEvent on the event object

evt.initEvent(’change’, true, true);

The first parameter here is the name of the event. The second one indicates whether the event can bubble or not. And the final one specifies whether or not the event’s default action can be prevented or not.

Step 3: Dispatch the event

txt.dispatchEvent(evt);

txt here is the html element.

Here’s the complete html code that does just this.

<html>
<head>
<script language=”javascript”>
function setText()
{
var txt = document.getElementById(’testinput’)
txt.value=”value”

//On IE
if(txt.fireEvent)
{
txt.fireEvent(’onchange’);
}
//On Gecko based browsers
if(document.createEvent)
{
var evt = document.createEvent(’HTMLEvents’);
if(evt.initEvent)
{
evt.initEvent(’change’, true, true);
}
if(txt.dispatchEvent)
{
txt.dispatchEvent(evt);
}

}
}

function textChangeHandler()
{
alert(’value changed’);
}
</script>
</head>
<body>
<input type=”text” id=”testinput” onchange=”textChangeHandler();”>
<input type=”button” value=”set text” onclick=”setText();” >
</body>
</html>

Comments

30 Responses to “Fire the onchange event the browser independent way”

  1. Sam Curren on December 7th, 2007 5:04 am

    I use jQuery for nearly all my js needs, and it has cross browser event handling and triggering baked in.

  2. Rakshith on December 7th, 2007 5:14 am

    Right Sam. You do not need to worry about firing events if you are working with frameworks such as jQuery.

  3. Tom Barclay on December 20th, 2007 3:15 pm

    This just saved me several hours of work and I really appreciate it. Merry Christmas and thanks.

  4. Rakshith on December 20th, 2007 11:39 pm

    Thanks Tom. I posted it for the very same reason. – Save others the hours of effort I put in to get this working.

    Merry Christmas to you as well.

  5. Rob on January 16th, 2008 7:27 am

    saved my day. thanx

  6. M on February 13th, 2008 11:40 pm

    Clean & neat. Thanks. This is quite close to what I was looking for :)

  7. Miguel Jaque on February 21st, 2008 6:44 am

    Thanks,

    You also save me several hours of desperation.

  8. Kostya Artemov on March 11th, 2008 2:15 am

    You saved at least half of my working day. Thanks! Best wishes.

  9. Dave on March 21st, 2008 12:50 pm

    Thanks for the tutorial. And thank you IE and firefox for taking 2 completely different approaches to this.

  10. R P on March 26th, 2008 11:16 am

    Awesome tip, thank you! I fought this battle some months ago and lost, but with this tip I was able to replace a bunch of crappy work around code in no time flat. Much appreciated!

  11. Mohamed Ragaee on March 27th, 2008 7:16 am

    Just, Thanks

  12. Praveen on May 27th, 2008 6:54 am

    Hi,
    I have a similar issue..
    I am using a javascript calendar. and this calendar fills the data into a text box.

    Now, what i have to do is… When ever the date is changed in the text box, a javascript function has to be called. I cannot change the calendar script as this is used in may places in the application.

    Can you please suggest me a solution for this??

    This text box is readonly

    Thanks in advance….

  13. Rakshith on May 27th, 2008 10:26 pm

    @ R P & Mohamed – Am glad it helped.

    @ Praveen – You say you cannot change the cakebdar script. Does your calendar fire an event when a date is selcted from the calendar? If that is the case you can register for the date selected event and fire the onchange event for the text box in that event handler. Hope it helps.

  14. Praveen on May 28th, 2008 6:19 am

    Thanks a lot… i was able to do it in this way..

  15. Seba Navarro on July 3rd, 2008 7:43 am

    Muchas Gracias!

  16. Corrado on September 1st, 2008 2:02 am

    Great article! It’s much more simple then onpropertychange, onchange, onkeyup approach and browser detect. Thanks again!

  17. Hemanth on September 26th, 2008 3:06 pm

    I am having issues in firing an event with the Chrome browser. Do you know why?
    Thanks a lot,
    Hemanth

  18. Brian Willy on October 23rd, 2008 9:21 am

    Yes, another saved day. I’m using YUI and I can’t believe they don’t have this cross-browser impl wrapped in their lib. Anyhow, much appreciated!!

  19. Pablo on June 21st, 2009 8:46 pm

    I can sleep tonight thanks to your code :D

  20. Rakshith on June 29th, 2009 1:22 am

    @Hemanth: hmm.. Strange.. I have never tried to get it working on chrome.

  21. Marta on July 23rd, 2009 12:34 am

    Thank you a lot! You saved my day.

  22. Hemangini on August 31st, 2009 3:28 am

    I am using a javascript calendar. and this calendar fills the data into a text box.

    Now, what i have to do is… When ever the date is changed in the text box, a javascript function has to be called. I cannot change the calendar script as this is used in may places in the application.

    Can you please suggest me a solution for this??

    This text box is readonly .

    My calendar does not fire any event when a date is selcted from the calendar. How to do it?

  23. Dan on October 12th, 2009 11:37 am

    Good stuff! I’ve been googling for a while trying to find this exact solution. Thanks.

  24. Rakshith on December 7th, 2009 11:39 pm

    @ Hemangini: I am not very sure how you would do this without the support from the javascript calendar that you are using. The calendar should ideally expose an event to which you can attach you javascript function.

  25. Chris S. on February 15th, 2010 6:51 am

    Thanks HEAPS for that post, man!

    OnChange was doin my head in….. I was using addEventListener to attach the event and it doesn’t simply fire by calling the onchange() function.

    However, your code here worked!!

    Thanks heaps, man!

  26. Manny on February 27th, 2010 10:20 pm

    BIG THANK YOU

  27. theUnseen on March 11th, 2010 11:19 am

    I am looking for this exact same thing, I have tried to follow your code and added the following to my app:

    //Fire event //On IE
    if(input_field.fireEvent)
    {
    input_field.fireEvent(’onChange’);
    }
    //Fire event On Gecko based browsers
    if(document.createEvent)
    {
    var evt = document.createEvent(’HTMLEvents’);
    if(evt.initEvent) { evt.initEvent(’change’,true, true); }
    if(input_field.dispatchEvent)
    {
    input_field.dispatchEvent(evt);
    }
    }

    It does not work on Firefox and Chrome, I have not test on other browsers. I use jQuery as the base framework for my app, how can i do this easier perhaps with jQuery??

  28. rizvisa1 on March 11th, 2010 3:03 pm

    Thanks a ton!!

  29. Salim on April 6th, 2010 8:31 am

    Thank you very much, it works :)

  30. Rakshith on April 20th, 2010 1:01 am

    @theUnseen – If you are using jQuery, i guess you do not have to worry about handling this as jQuery should take care of browser differences.

Leave a Reply