Turn radio options into buttons

From pmusers
Jump to: navigation, search

The following example shows how to turn the options in a radio control into buttons.



Dynaform: Make radio into button.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processmaker.com>
Version: 1.0 (2019-05-22)
Tested in: PM 3.3.8 Community in Firefox 60.5


The following Dynaform has a radio button with the ID "selectColor":

TurnRadioIntoButtonInDesigner.png

The following JavaScript code adds a box around each option in the radio control and sets its background color to light grey if an option is selected:

//make options horizontal:
$("#selectColor").find("div.radio").addClass("radio-inline").css("padding-left","0px");

//add box around each radio option:
$("#selectColor").find("input.pmdynaform-control-radio").parent().addClass("btn btn-default").
  css("margin-bottom","10px").css("padding","10px 40px").css("white-space","normal").css("text-align","left");

//function to set the background color of selected option to light grey:
function setBackgroundInRadio(val) {
  $("#selectColor").find("input.pmdynaform-control-radio").parent().css("background-color", "");
  
  if (val) {
    $("#selectColor").find("input[value='"+val+"']").parent().css("background-color", "lightgrey");
  }
}

$("#selectColor").setOnchange( function(newVal, oldVal) {
  setBackgroundInRadio(newVal);
});

//set background color in radio when Dynaform loads
setBackgroundInRadio( $("#selectColor").getValue() );

When an option is selected (marked) in the radio control, its background color is changed to light grey:

TurnRadioIntoButtonInUser.png