topic Re: Click event listening on a radio button in ArcGIS JavaScript Maps SDK Questions

Click event listening on a radio button

TracySchloss — Tue, 12 Aug 2014 20:49:45 GMT

I am working on a menu that lets the use select a classification method, either quantile or equal interval, as well as letting them change the color or the number of intervals. The number of classes is in a dijit/form/NumberSpinner. The colors I have in a FilteringSelect. For both of those, I was able to have an event listener such as

  registry.byId('classSelect').on ('change', function (){
    numClass = registry.byId("classSelect").value;
    drawFeatureLayer();
  });

This lets the user change the interval and it immediately executes the functions that do the drawing. I like the look of a radio buttons and I want to use those for my classification methods. First I tried a dijit/formRadioButton. This looks OK, but selecting between the two choices doesn't have very good styling. The first button still has a little fill color to it, and the 2nd one does too, so it looks like both of them are selected.

<h4>Classification method: </h4>
     <form id="classForm"  action="">
        <input type="class-method" name="method" id="btnQuantile" value="quantile" data-dojo-type="dijit/form/RadioButton" checked="checked"/> <label for="btnQuantile">Quantile</label> <br />
        <input type="class-method" name="method" id="btnEqInterval" value="equal_interval" data-dojo-type="dijit/form/RadioButton" /> <label for="btnEqInterval">Equal Interval </label> <br />           
    </form>

The other thing I'm not sure about is how I might have an event listener to the change in buttons. All I can figure out is to add a 'Go' button which will read the classification and then execute my drawing function.

 registry.byId('btnClassify').on('click', function (){
   var clsForm = dom.byId("classForm");
        for(var i = 0; i < clsForm.method.length; i++) {
          if(clsForm.method.checked){
          currentMethod = clsForm.method.value;
          } 
     }
drawFeatureLayer();
  });

Since I figured out I don't need a 'Go' button for either the number of classes or my colors, I'd really like to get rid of it all together and not have to have it just for my classification method.

I suppose I could use another type of menu, but I only have two methods. It looks klunky to have a dropdown menu that has just one other option in it. Am I missing something obvious on how to detect when one of those two buttons are selected?

Re: Click event listening on a radio button

KellyHutchins — Tue, 12 Aug 2014 20:52:48 GMT

Tracy

Here's a sample that shows how to detect when a radio button's value is changed:

Demo: Dijit CheckBox/RadioButton onChange‌

Re: Click event listening on a radio button

KellyHutchins — Tue, 12 Aug 2014 20:59:25 GMT

And if you look at the jsfiddle posted in the last response on this stack overflow discussion you'll see one example of the dijit radio buttons could be customized.

html - How do I make a customized Radio Button using CSS and Javascript or DOJO? - Stack Overflow‌

Re: Click event listening on a radio button

TracySchloss — Tue, 12 Aug 2014 21:12:20 GMT

It is executing, but its still not styled correctly. The first checked item retains a filled look.

I'm sure I have something out of order. What is the true parameter for ?

HTML

<li>

<input id="btnQuantile" name="quantile" type="radio" value="quantile" checked

data-dojo-type="dijit/form/RadioButton">

<label for="btnQuantile">Quantile</label>

</li>

<li>

<input id="btnEqInterval" name="eqInterval" type="radio" value="equal_interval"

data-dojo-type="dijit/form/RadioButton">

<label for="btnEqInterval">Equal Interval</label>

</li>

</ul>

JAVASCRIPT

registry.byId("btnQuantile").on("click", function(isChecked){

if(isChecked){

currentMethod="quantile";

drawFeatureLayer();

}

}, true);

registry.byId("btnEqInterval").on("click", function(isChecked){

if(isChecked){

currentMethod="equal_interval";

drawFeatureLayer();

}

}, true);

Re: Click event listening on a radio button

KellyHutchins — Tue, 12 Aug 2014 21:19:35 GMT

Tracy,

The name for both of your input elements needs to be the same in order for the radio buttons to function as a group. Otherwise they are just independent buttons and can both be checked at the same time. In the sample link I sent you'll see that the name value for both options is set to toppings.

Re: Click event listening on a radio button

TracySchloss — Tue, 12 Aug 2014 21:21:52 GMT

That was it, thanks! I had it right in another section of my code, I just went a little too far editing the pizza sample.