JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<div id="form1" data-dojo-type="dijit/form/Form">
<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>
<button id="submitBtn" data-dojo-type="dijit/form/Button" type="submit" value="Submit">Submit</button><label for="submitBtn">Form value will be displayed on click</label>
</div>
<pre id="output"></pre>
JavaScript
require([
"dojo/_base/declare",
"dojo/_base/array",
"dojo/on",
"dojo/parser",
"dojo/json",
"dojo/html",
"dijit/registry",
"dijit/form/Form",
"dijit/form/_FormValueWidget",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/form/RadioButton",
"dojo/domReady!"
], function (declare, array, on, parser, json, html, registry, Form, _FormValueWidget, _WidgetsInTemplateMixin, Button) {
var MyWidget = declare([_FormValueWidget, _WidgetsInTemplateMixin], {
templateString: "<div><h2>Group of radioBtns '${name}'</h2>" +
"asdasd: <input type='radio' ${!nameAttrSetting} data-dojo-attach-point='focusNode' data-dojo-type='dijit/form/RadioButton' checked='checked' data-dojo-props='value:\"radio1\"'></input></br>" +
"<input type='radio' ${!nameAttrSetting} data-dojo-type='dijit/form/RadioButton' data-dojo-props='value:\"radio2\"'></input>" +
"<input type='radio' ${!nameAttrSetting} data-dojo-type='dijit/form/RadioButton' data-dojo-props='value:\"radio3\"'></input>" +
"<input type='hidden' value='${value}'/>" +
"</div>",
startup : function() {
var self = this;
this.inherited(arguments);
var selectedRadio = array.filter(registry.findWidgets(self.domNode), function(radio){
return radio.get("checked");
}).pop();
this.set("value", selectedRadio.get("value"));
this.own(on(this.domNode, "input[type='radio']:click", function(evt){
console.debug(evt.target);
self.set("value", evt.target.value);
}));
}
});
parser.parse().then(function(intances){
new MyWidget({
name: "radioBtns1"
}, "w1").startup();
new MyWidget({
name: "radioBtns2"
}, "w2").startup();
new MyWidget({
name: "radioBtns3"
}, "w3").startup();
...