How to add a listener for a radio button

StephenLead — Sat, 11 Dec 2021 19:32:13 GMT

I'm creating a widget which contains some radio buttons, and I need to figure out how to trigger the appropriate code when the radio button selection changes. Here's a simple mockup of the app:

Widget.html contains the radio buttons, which each have the class rdoButton:

<div>
<form>
<input type="radio" id="rdoYes" class="rdoButton" name="radio1" value="yes" />Yes
<input type="radio" id="rdoNo" class="rdoButton" name="radio1" value="no" />No
</form>
</div>

Within Widget.js I'm trying to set the listener at the class level, and also at the ID level, and trying the change and click events:

onChangeRadio: function() {
  console.log("change radio button")
 },

_bindEvents: function() {
 
  this.own(on(this.rdoTheme,
    "change",
    lang.hitch(this, this._onChangeRadio)));

  this.own(on(this.rdoYes,
    "click",
    lang.hitch(this, this._onChangeRadio))); 
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Clicking on the radio buttons doesn't fire the onChangeRadio function in either case. How can I set a listener for these radio buttons? Thanks

Edit: looking at the Scalebar widget, I'm trying to emulate the code used in its Settings section:

<div class="unit-item" data-dojo-attach-point="englishNode">
  <div data-dojo-type="jimu/dijit/RadioBtn" data-dojo-props="group:'sclebarUnit'"></div>
  <label class="jimu-leading-margin025">${nls.english}</label>
 </div>

this.own(on(this.englishNode, 'click', lang.hitch(this, function() {
  this.set('selectUnit', 'english');
 })));‍‍‍‍‍‍‍‍

I can successfully trigger the Click function using this approach, but I can't see how to generate the radio buttons - only the labels show.

Re: How to add a listener for a radio button

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:32:15 GMT

Stephen,

I am no sure what you are attaching your change listener to "rdoTheme"? but needless to say I never use the change event only the click event:

//Widget.html
<div data-dojo-type="dijit/form/Form" data-dojo-attach-point="symFormDijit">
    <input data-dojo-attach-point="rdoYes" checked="true" type="radio"/>
    <label data-dojo-attach-point="rdoYesLabel">${nls.symbolServer}</label>&nbsp;&nbsp;
    <input data-dojo-attach-point="rdoNo" type="radio"/>
    <label data-dojo-attach-point="rdoNoLabel">${nls.symbolConfig}</label>
</div>

//Widget.js

//require
'jimu/utils',
jimuUtils,

_initRadios:function(){
    var group = "radio_" + jimuUtils.getRandomString();
    this.rdoYes.name = group;
    this.rdoNo.name = group;

    jimuUtils.combineRadioCheckBoxWithLabel(this.rdoYes, this.rdoYesLabel);
    jimuUtils.combineRadioCheckBoxWithLabel(this.rdoNo, this.rdoNoLabel);
    this.own(on(this.rdoYes,'click',lang.hitch(this,this._onChangeRadio)));
    this.own(on(this.rdoNo,'click',lang.hitch(this,this._onChangeRadio)));
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic How to add a listener for a radio button in ArcGIS Web AppBuilder Questions

How to add a listener for a radio button

Re: How to add a listener for a radio button