How to get the Displayed Value for a Dropdown, Edit-combo, Checkbox, or RadioButton control

Description

Example JavaScript for getting the displayed value for the selected choice(s) in a Dropdown, Edit-combo, Checkbox, or RadioButton control.

Discussion

When you define the choices in a Dropdown, Edit-combo, Checkbox, or RadioButton control, you can display a value that is different from the stored value for each choice. The {dialog.object}.getValue() method returns the stored value when you read the value from the control. In some cases, you may prefer to get the displayed value instead.

Getting the Displayed Value for Dropdown and Edit-combo Controls

The {dialog.object}.getValueDisplay() method can be used to get the displayed value for dropdown box and edit-combo controls. For example:

var displayedValue1 = {dialog.object}.getValueDisplay('myDropdown1');
alert("Dropdown display value is " + displayedValue1);

var displayedValue2 = {dialog.object}.getValueDisplay('myEditCombo1');
alert("Edit-combo display value is " + displayedValue2);

The {dialog.object}.getValueDisplay() method only works with dropdown controls and edit-combo boxes. For other controls, you will need to use another method.

Getting the Displayed Value for RadioButtons

To get the displayed value for a selected RadioButton, a different approach is needed. The getValueDisplay() function doesn't work with this control type. Instead, you can use jQuery to get the label for the selected value. For example:

var value = {dialog.object}.getValue(control);
var ele = {dialog.object}.getPointer(control);

var forid = ele.id.split(".");
forid.shift(); // strips {dialog.componentName} from the ID
forid = forid.join(".") + "["; // append [, which is used in the name attribute

var checkedEle = jQuery("[name^='"+forid+"']:checked"); // get selected radiobutton
var checkedLabel = checkedEle.next("label"); // get the label for selection
var displayedValue = checkedLabel.text(); // get the text

alert("Selected value is " + displayedValue);

Getting the Displayed Value for Checkboxes

To get the displayed value for selected Checkboxes, you must also use JavaScript to extract the data from the label controls. The example below is similar to the JavaScript used to get the displayed value for a selected RadioButton. Because Checkboxes can have multiple values, you must loop over all of the matching elements returned by the jQuery search:

var value = {dialog.object}.getValue(control);
var ele = {dialog.object}.getPointer(control);

var forid = ele.id.split(".");
forid.shift();
forid = forid.join(".") + "[";

var checkedEles = jQuery("[name^='"+forid+"']:checked");
var displayedValues = [];

for (var i = 0; i < checkedEles.length; i++ ) {
    var radioLabel = jQuery(checkedEles[i]).next("label");
    var text = radioLabel.text();
    displayedValues.push(text);
}

displayedValues = displayedValues.join(", ");

alert("Selected values are " + displayedValues);

Sample Component

The examples above are demonstrated in this sample component.