WordPress - RadioButtons, Checkboxes, and Comboboxes

The html code to produce RadioButtons, Checkboxes, and Comboboxes is well known. The problems occur when you try to connect them to a database.

Specifically, how to indicate which option (or state) was selected when the data was saved.

Overview

In general, it is better to have both the available options and the selected options stored in the database.

Having the possible radio button and combobox options stored in the database allows you to change these without having to edit the template (php code).

This page presents 3 functions that create RadioButton, Checkbox, and Combobox components based on the parameters passed. In each case, the generated html code is spaced and indented to make it human readable when someone does a view source. (One of my complaints about other peoples code is that the html is not readable without a lot of work.)

One section shows the queries and code used to create the option arrays for the RadioButtons and Comboboxes. There may be better ways to create the arrays (or perhaps it would simply be better to pass an array of objects), but the WordPress and php documentation is crap and I have already spent enough time getting this much to work.

This final section shows how to set the selection using jQuery. I had originally decided to hard code the html and to show the saved values using jQuery. It never worked right - showing the full page for more than 10 seconds before setting the properties. At any rate, I have left the code here for reference.

create_radiobuttons

The idea is to produce a function to produce a radio group from a few parameters.

<input type="radio" name="location_id" VALUE="BR" CHECKED>BR <input type="radio" name="location_id" VALUE="CE">CE <input type="radio" name="location_id" VALUE="CP">CP

BR CE CP

function create_radiobuttons($groupname, $selected_key, $options, $prefix='<br>  '){
  $return = "\n";

  foreach( $options as $key => $display ) { 
    $checked = ($selected_key == $key ) ? " checked" : '';
    $return .= "$prefix<input type='radio' name='$groupname' value='$key'$checked>$display\n";
  }

  return $return;
}

**Parameters**
Parameter	Description
$groupname	This is assigned to both the name property
$selected_key	The selected option
$options	This is an array (key1=>display1, key2=display2, ...)
$prefix	This helps to make the html readable. By default, this contains a <br> tag and a couple of spaces.

create_checkbox

The idea is to produce a function to produce a combobox from a few parameters.

Label <input type="checkbox" name="friends" VALUE="1">

Label

function create_checkbox($groupname, $checked_value, $current_value, $prefix='  '){
  $return = "\n";

  $checked = ($current_value == $checked_value ) ? " checked" : '';
  $return .= "$prefix<input type='checkbox' name='$groupname' value='$checked_value'$checked>\n";

  return $return;
}

**Parameters**
Parameter	Description
$groupname	This is assigned to both the name property
$checked_value	Value returned if the box if checked
$current_value	Value read from the database
$prefix	This helps to make the html readable. By default, this contains a couple of spaces.

create_combobox

The idea is to produce a function to produce a combobox from a few parameters.

<select name="group" id="group"> <option value="ygadlt">young adult <option value="chldrn">children <option value="specal selected">special </select>

function create_combobox($groupname, $selected_key, $options, $prefix='  '){
  $return = "\n$prefix<select name='$groupname' id='$groupname'>\n";

  foreach( $options as $key => $display ) { 
    $selected = ($selected_key == $key ) ? " selected" : '';
    $return .= "$prefix  <option value='$key'".$selected.">$display \n";
  }

  $return .= "$prefix</select>\n\n";

  return $return;
}

**Parameters**
Parameter	Description
$groupname	This is assigned to both the name and the id properties
$selected_key	The selected option
$options	This is an array (key1=>display1, key2=display2, ...)
$prefix	This helps to make the html readable. By default, this contains a couple of spaces.

Create the arrays

  function load_parameters()
  {
    global $wpdb;
    
    $lib_events             = $wpdb->prefix . 'lib_events';
    $lib_events_books       = $wpdb->prefix . 'lib_events_books';
    $lib_events_config      = $wpdb->prefix . 'lib_events_config';  // not used, is now
    $lib_events_submit      = $wpdb->prefix . 'lib_events_submit';
    $lib_events_templates   = $wpdb->prefix . 'lib_events_templates';
    $lib_events_lu          = $wpdb->prefix . 'lib_events_lu';
    $lib_events_locations   = $wpdb->prefix . 'lib_events_locations';

    $sql   = "select `option_id`, `value` from $lib_events_lu where `group_id`= 'age' ";
    $age   = $wpdb->get_results($sql);

    $sql   = "select `option_id`, `value` from $lib_events_lu where `group_id`= 'group' ";
    $group = $wpdb->get_results($sql);

    $sql   = "select `location_id` from $lib_events_locations ";
    $lib   = $wpdb->get_results($sql);

    $ages = array();
    foreach($age as $record){
          // echo "\n<br> $record->option_id - $record->value "; // just for test
      $ages[$record->option_id] = $record->value;
    }

    $groups = array();
    foreach($group as $record){
      $groups[$record->option_id] = $record->value;
    }

    $libraries = array();
    foreach($lib as $record){
      $libraries[$record->location_id] = $record->location_id; // the keys and values are the same
    }

    $parameters = array('ages'=>$ages, 'groups'=>$groups, 'libraries'=>$libraries);

    return $parameters;
  }

Display the components (the "database" values are hardcoded for test)

$groupname    = 'test_1'; 
$selected_key = 'k-5'; 
$options      = $parms['ages']; //array('ygadlt'=>'young adult', 'chldrn'=>'children', 'specal'=>'specal');
echo create_combobox($groupname, $selected_key, $options);

$groupname    = 'test_3'; 
$selected_key = 'chldrn'; 
$options      = $parms['groups']; //array('ygadlt'=>'young adult', 'chldrn'=>'children', 'specal'=>'specal');
echo create_combobox($groupname, $selected_key, $options);

echo '<p>';
// function create_radiobuttons($groupname, $selected_key, $options, $prefix='<br>  ')

$groupname    = 'test_2'; 
$selected_key = 'DC'; 
$options      = $parms['libraries']; //array('CE'=>'CE', 'CP'=>'CP', 'DC'=>'DC');
echo create_radiobuttons($groupname, $selected_key, $options, '  ');

jQuery

If you want to use a hard coded list of options, jQuery provides a way to set the selected value.

<script type='text/javascript' >
 jQuery(document).ready(function(){    
   jQuery("#AgeGroup").val("6-12");  // this sould be read from the database
 })
</script>

  <SELECT name="AgeGroup" id="AgeGroup">
    <OPTION SELECTED VALUE="all"  >family - all ages
    <OPTION          VALUE="pre-k">toddler - pre-k
    <OPTION          VALUE="k-5"  >children - k-5th
    <OPTION          VALUE="6-12" >young adults - 6-12th
    <OPTION          VALUE="adult">adult - 15 and up
  </SELECT>

Note that #AgeGroup matches the id.

Personally, I prefer to hand code lists to help things line up ... however, I don't like using jQuery.

Author: Robert Clemenzi