Cross column radio group solution using dynamically generated HTML

Question

I am tasked with creating a screen in Apex matching look and feel of an existing application screen; tabular form, multiple column radio buttons to update a single column value (radio group needs to be row oriented, across multiple columns). I could not find a way to use HTMLDB_ITEM.RADIO_GROUP () function for this due to the radio group being column based, great as a row selector but not for use across columns (each button being a column).
My first thought was to comprise and use checkboxes via HTMLDB_ITEM.CHECKBOX () for the multiple choices (in each column) and HTMLDB_ITEM.HIDDEN() to hold the chosen value, a JavaScript function for “onClick” event to make the checkboxes in one row act like radio buttons in a radio group. I created a simple application to show the concepts of my solutions …
SQL looks like this:
select pk_id, -- f01
object_to_color, -- f02
HTMLDB_ITEM.CHECKBOX(11, color_choice,
'onClick="chkboxAction('||pk_id||', document.wwv_flow.f11, ''RED'')"', 'RED') red,
HTMLDB_ITEM.CHECKBOX(12, color_choice,
'onClick="chkboxAction('||pk_id||', document.wwv_flow.f12, ''BLUE'')"', 'BLUE') blue,
HTMLDB_ITEM.CHECKBOX(13, color_choice,
'onClick="chkboxAction('||pk_id||', document.wwv_flow.f13, ''GREEN'')"', 'GREEN') green,
color_choice -- f03
from objects_to_color
Columns pk_id and color_choice are set as Show off and Display As Hidden. Note that my HTMLDB_ITEM.CHECKBOX items start with id number 11 (f11 – f13) so as not to conflict with the item id’s Apex will generate on it’s own. I could have used HTMLDB_ITEM functions to create all items and had my own PL/Sql update process.
This creates a tabular presentation with a column for each color choice as a checkbox, shown checked if that color is initially set.
The JavaScript function chkboxAction() clears the other checkboxes if a color is selected and stores the color in the hidden item db column for use in Apex Submit processing. Sorry the identation get's lost in the post!
function chkboxAction (id, ckbx, color) {
// f01 is pk_id (hidden)
// f11 is RED checkbox
// f12 is BLUE checkbox
// f13 is GREEN checkbox
// f03 db column color_choice for update (hidden)
var idx;
// Find row index using pk_id passed in as id argument.
for (var i=0; i < document.wwv_flow.f01.length; i++) {
if (document.wwv_flow.f01.value == id) {
idx = i;
i = document.wwv_flow.f01.length;
if (ckbx(idx).checked == true) {
// Set hidden color_choice column value to be used in update.
document.wwv_flow.f03(idx).value = color;
// Uncheck them all, then reset the one chosen.
document.wwv_flow.f11(idx).checked = false;
document.wwv_flow.f12(idx).checked = false;
document.wwv_flow.f13(idx).checked = false;
ckbx(idx).checked = true;
} else {
// Unchecked so clear color_choice column value to be used in update.
document.wwv_flow.f03(idx).value = '';
This works well and, as an aside, has an added feature that the color can be “unchosen” by unchecking a checked checkbox and leaving all checkboxes unchecked. This cannot be done with radio buttons unless a radio button is added as “no color”.
But what if radio buttons must be used, as in my situation? Here is another solution using custom code to dynamically generate radio buttons for a row based radio group rather than using HTMLDB_ITEM.RADIO_GROUP ().
select pk_id, -- f01
object_to_color, -- f02
'<input type="radio" name="rb'||pk_id||'" id="rb'||pk_id||'_1" value="RED" '||
decode(color_choice, 'RED', 'CHECKED', '')||
' onClick="rbAction('||pk_id||', ''RED'')">' red,
'<input type="radio" name="rb'||pk_id||'" id="rb'||pk_id||'_2" value="BLUE" '||
decode(color_choice, 'BLUE', 'CHECKED', '')||
' onClick="rbAction('||pk_id||', ''BLUE'')">' blue,
'<input type="radio" name="rb'||pk_id||'" id="rb'||pk_id||'_3" value="GREEN" '||
decode(color_choice, 'GREEN', 'CHECKED', '')||
' onClick="rbAction('||pk_id||', ''GREEN'')">' green,
color_choice -- f03
from objects_to_color
The pk_id column is used here to ensure a unique name and unique id for the items. In practice a custom api should be used to generate items in this way.
The JavaScript function is actually simpler for radio buttons because the radio group handles the mutually exclusive logic for choosing a color.
function rbAction (id, color) {
// f01 is pk_id (hidden)
// f03 db column color_choice for update (hidden)
var idx;
// Find row index using evaluation_question_id.
for (var i=0; i < document.wwv_flow.f01.length; i++) {
if (document.wwv_flow.f01.value == id) {
idx = i;
i = document.wwv_flow.f01.length;
// Set hidden result column referenced in update.
document.wwv_flow.f03(idx).value = color;
Now the problem is that on update, Apex will be confused by the custom items and try to post updated values to it’s own internal items – which don’t exist. The result is the very frustrating HTTP 404 - File not found error when apex/wwv_flow.accept executes on Submit. So, the trick is to clear the custom items prior to the update with a simple JavaScript function, then the values show again when the page is rerendered, if you are not branching from the page. The Submit button is changed to call the following function:
function submit () {
var items = document.getElementsByTagName("INPUT");
for (i=0; i< items.length; i++) {
if (items(i).type == "radio") {
if (items(i).checked == true)
items(i).checked = false;
doSubmit('SUBMIT');
This technique might have general use when using custom items. Comments or improvements on this?
See Oracle Apex site: workspace SISK01, app OBJECTS_TO_COLOR

Answer 1

Just the code for formatting.
Checkboxes to behave like radio group ...
SQL ...
select pk_id,              -- f01
       object_to_color,    -- f02
          HTMLDB_ITEM.CHECKBOX(11, color_choice,
              'onClick="chkboxAction('||pk_id||', document.wwv_flow.f11, ''RED'')"', 'RED') red,
          HTMLDB_ITEM.CHECKBOX(12, color_choice,
              'onClick="chkboxAction('||pk_id||', document.wwv_flow.f12, ''BLUE'')"', 'BLUE') blue,
          HTMLDB_ITEM.CHECKBOX(13, color_choice,
              'onClick="chkboxAction('||pk_id||', document.wwv_flow.f13, ''GREEN'')"', 'GREEN') green,
       color_choice  -- f03
from objects_to_colorJavaScript ...
function chkboxAction (id, ckbx, color) {
    // f01 is pk_id (hidden)
    // f11 is RED checkbox
    // f12 is BLUE checkbox
    // f13 is GREEN checkbox
    // f03 db column color_choice for update (hidden)
    var idx;
    // Find row index using pk_id passed in as id argument.
    for (var i=0; i < document.wwv_flow.f01.length; i++) {
       if (document.wwv_flow.f01(i).value == id) {
          idx = i;
          i = document.wwv_flow.f01.length;
    if (ckbx(idx).checked == true) {
      //  Set hidden color_choice column value to be used in update.
      document.wwv_flow.f03(idx).value = color;
      // Uncheck them all, then reset the one chosen.
      document.wwv_flow.f11(idx).checked = false;
      document.wwv_flow.f12(idx).checked = false;
      document.wwv_flow.f13(idx).checked = false;
      ckbx(idx).checked = true;
    } else {
      //  Unchecked so clear color_choice column value to be used in update.
      document.wwv_flow.f03(idx).value = '';
}Radio button solution ...
SQL ...
select pk_id,              -- f01
       object_to_color,    -- f02
       '<input type="radio" name="rb'||pk_id||'" id="rb'||pk_id||'_1" value="RED" '||
            decode(color_choice, 'RED', 'CHECKED', '')||
            ' onClick="rbAction('||pk_id||', ''RED'')">' red,
       '<input type="radio" name="rb'||pk_id||'" id="rb'||pk_id||'_2" value="BLUE" '||
           decode(color_choice, 'BLUE', 'CHECKED', '')||
           ' onClick="rbAction('||pk_id||', ''BLUE'')">' blue,
       '<input type="radio" name="rb'||pk_id||'" id="rb'||pk_id||'_3" value="GREEN" '||
           decode(color_choice, 'GREEN', 'CHECKED', '')||
           ' onClick="rbAction('||pk_id||', ''GREEN'')">' green,
       color_choice  -- f03
from objects_to_colorJavaScript ...
function rbAction (id, color) {
    // f01 is pk_id (hidden)
    // f03 db column color_choice for update (hidden)
     var idx;
     // Find row index using evaluation_question_id.
    for (var i=0; i < document.wwv_flow.f01.length; i++) {
       if (document.wwv_flow.f01(i).value == id) {
          idx = i;
          i = document.wwv_flow.f01.length;
    //  Set hidden result column referenced in update.
    document.wwv_flow.f03(idx).value = color;
function submit () {
  // Clears radio buttons to prevent Apex trying to post and causing page error.
  var items = document.getElementsByTagName("INPUT");
  for (i=0; i< items.length; i++) {
    if (items(i).type == "radio") {
      if (items(i).checked == true)
        items(i).checked = false;
  doSubmit('SUBMIT');
}