Fire "onchange" event on page from google chrome extension

google-chrome, javascript

Solution

Have you tried emitting the event rather than directly calling the function? As far as I remember, calling event-handlers directly can have side effects. I can't find a source at the moment though.

Try to replace

document.getElementsByName("country")[0].onchange();

with

var changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
document.getElementsByName("country")[0].dispatchEvent(changeEvent);

I also created a little fiddle: http://jsfiddle.net/d94Xb/1/

Furthermore you might look into `addEventListener()` and `dispatchEvent()` a bit more as this is the common way to register and execute event handler.

(update: 2015-04-27) The method described above is deprecated by now as @10basetom points out. The better way is to use Event(). Please note that this won't work in IE and Safari.

Problem

I am developing an extension to autofill a form with data from another website. I have a context menu with different options, each with different data but complete the same form. The data is dynamic and depend on another website. With "chrome.tabs.executeScript" i can insert some data, but i can not fire the event "onchange" of the fields. Can change the value of a select, but the website has an event "onchange" that does not fire when I change the value, and not get through "chrome.tabs.executeScript" run the "onchange". The error it shows is: "Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement" EDIT: manifest.json: ``` "content_scripts": [ { "matches": ["url_where_the_code_must_run"], "js": ["billing.class.js", "script.js"] } ], . . . "permissions": [ "tabs", "url_from_where_i_get_the_data", "url_where_the_code_must_run" ], ``` script.js: ``` select = document.createElement('select'); var option = document.createElement('option'); option.value = ""; option.innerHTML = "Select Client"; select.appendChild(option); select.onchange = function() { var client = Billing.getClient(this.value); if (client) { document.getElementsByName("country")[0].value = client.country_id; document.getElementsByName("country")[0].onchange(); } } for (var i = 0; i < Billing.clients.length; i++) { option = document.createElement('option'); option.value = Billing.clients[i].id; option.innerHTML = Billing.clients[i].name; select.appendChild(option); } form.parentElement.insertBefore(select, form); ``` When this line is executed, show "Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement": ``` document.getElementsByName("country")[0].onchange(); ``` But if I run this line directly in the console, normally runs without errors document.getElementsByName("country")[0] is an element of the url, and "select" is an element that i create in the extension to select what client data should load. url_where_the_code_must_run: ``` <script type="text/javascript"> function customFunction() { // Do something that i dont care } </script> <select name="country" onchange="customFunction()"> </select> ```

Original source