Form onChange

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<div id="form1">
    <input id="textBox1" type="text"/>
    <select id="select1"></select>
</div>
<div id="formValue"></div>

JavaScript

require(["dojo/_base/declare", "dojo/_base/array", "dojo/Evented", "dojo/parser", "dijit/registry", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Select", "dojo/dom", "dojo/json", "dojo/domReady!"], function(declare, array, Evented, parser, registry, Form, TextBox, Select, dom, json){
    var EventedForm = declare([Form, Evented], {
        postCreate : function() {
            var self = this;
            this.inherited(arguments);
            
            // When any of my children changes, I emit a custom "change" event
            array.forEach(registry.findWidgets(self.domNode), function(childWidget){
                childWidget.onChange = function(){ 
                    self.emit("change", self.get("value"));
                };
            });
        }
    });
    
    var textBox = new TextBox({ name : "param1", value: "foo" }, "textBox1");

    var select = new Select({ 
        name : "param2",
        value : "foo", 
        options : [
            { value : "foo", label : "Foo" },
            { value : "bar", label : "Bar" }
        ]}, "select1");
    
    var form = new EventedForm({}, "form1");
    dom.byId("formValue").innerHTML = json.stringify(form.get("value"));
    form.on("change", function(value) {
        dom.byId("formValue").innerHTML = json.stringify(value);   
    });
});