dojo/form/select onchange event not working for me in dojo 1.8

Question

I am trying out dojotoolkit 1.8 and cant figure out how to hook up an onchange event for a dojo/form/select

Nothing happens with this

require(["dojo/dom","dojo/on"], function(dom,on){
   on(dom.byId("myselect"),"change",function (evt){
         alert("myselect_event");

});

If instead, the following hook into click works:

on(dom.byId("myselect"),"click",function (evt){

but i want to capture the value after user clicks and changes

I am sure it is simpler than going back to Plain ol javascript onChange...

Thx

You are mixing up Dijit objects and DOM nodes. @nozzleman's solution should work. If you would like to find out more, have a look at [Dojo can't programatically concatenate dijits?](http://stackoverflow.com/questions/8454552/dojo-cant-programmatically-concatenate-djits/8455984#8455984) — phusick, Nov 26 '12 at 08:07

nozzleman · Accepted Answer · 2012-11-26T08:25:39.237

4

You could try something like this:

    var select = dijit.byId('myselect');

    select.on('change', function(evt) {
        alert('myselect_event');
    });

I've seen this in the reference-guide multiple times, eg in the dijit/form/select' s reference-guide at 'A Select Fed By A Store'.

Maybe it even returnes the handle, i haven't looked this up so far. But i guess it should work.

EDIT:

Considering @phusick's comment, i want to add, that you could also simply change the "change" to "onChange" or the dom to dijit within calling on(...)

edited Nov 26 '12 at 08:25

answered Nov 26 '12 at 07:44

nozzleman

9,529
4
37
58

Well, we are glad beeing able to help you out! How about accepting a answer then? ;) – nozzleman Nov 27 '12 at 13:17

score 2 · Answer 2 · answered Nov 26 '12 at 13:48

2

Following in the footsteps of @nozzleman's answer try

var select = registry.byId('myselect');

select.on('change', function(evt) {
    alert('myselect_event');
});

If you use on instead of connect then you don't have to write onChange, you can simply write change.

answered Nov 26 '12 at 13:48

Gaurav Ramanan

3,655
2
21
29

Thx - additional clarification - is using element.on construct better than using on (domnode,"event") or is it just 2 ways of saying the same thing.... – Aveesh Nov 27 '12 at 11:44
I think the former is better for 2 reasons. First, it follows the API of other JS frameworks (like jQuery) and second, it might just become native in the future. – Gaurav Ramanan Sep 21 '13 at 06:04

score 0 · Answer 3 · answered Feb 14 '13 at 21:00

Similar to above answers do a dijit.ById to find the correct element and then register the 'onItemClick' event.

creating the select dropdown programatically appends a _menu to whatever node you create the select items so 'search' becomes 'search_menu' on a page init you can do the following:

  dojo.connect(dijit.byId('search_menu'),'onItemClick',function(){
        //console.log("search menu");
        doSearch('recreation');
     });

score 0 · Answer 4 · answered Dec 30 '14 at 18:46

As others have pointed out, you're trying to access the Dijit using DOM. Also, the parameter to the anonymous function for the "change" event is the value selected by the user, not the event itself.

Here's your code modified to access the Dijit and process the "change" event:

require(["dijit/registry", "dojo/on"], function(registry, on) {
   on(registry.byId("myselect"), "change", function (value) {
         alert("change_event.value = " + value);
   });
});

score 0 · Answer 5 · edited May 23 '17 at 12:33

Late to the party, but I recently ran into the issue. Hopefully my answer will help some poor soul maintaining some legacy code. The answer is for combobox but worked for select as well -

onChange not sufficient to trigger query from Dojo Combobox. Need to attach listener to dropdown items.

select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});

Ref: https://stackoverflow.com/a/12422155/4564016

dojo/form/select onchange event not working for me in dojo 1.8

5 Answers5