How can I build a 'combo' box input?

Written Nov 25, 2012 12:11

A 'combo' box is a linked pair of a select drop-down and a text input set up so that the text box is only enabled (and required) if the 'Other' option is selected in the drop down; otherwise it is empty and disabled.

There is a demonstration form {rokbox text=|here| size=|600,600| }http://greyhead.org/index.php?option=com_chronoforms&chronoform=test_form_other_box&tmpl=component{/rokbox}.

Add a Drop down element and a Text box element to your form and give them both the same name (I used 'choose_one') but different ids ( I used 'choose_one' for the drop-down and 'choose_one_other' for the text box.
Click the 'required' validation for both boxes (if you want them required).
Drag a Load JS action into the form On Load event and add this code to it:

window.addEvent('domready', function() {
  var select, other;
  select = $('choose_one');
  other = $('choose_one_other');
  switchOther();
  select.addEvent('change', switchOther);
  function switchOther() {
    if ( select.value == 'other' ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
  }
});

Change the select = and other = lines to match the ids you have used and the select.value == 'other' to match the value you have set for the 'Other' option in the drop-down.
Save and test the form.

This form will return a value in $form->data['choose_one'] it will either be the selection from the drop-down or the value entered in the text box if 'Other' is selected in the drop-down.

You can extend this to allow the new option to be added to the option list by getting the options from a database table and saving any new results to it. Note: this *always* needs careful house-keeping to keep the list clean and usable.

Combo box with radio buttons

Here's a modified version of this script to work with a radio button group instead of a select drop-down.

window.addEvent('domready', function() {
  var select, other;
  select = $('choose_one_container_div');
  other = $('choose_one_other');
  switchOther();
  select.addEvent('click', switchOther);

  function switchOther() {
    var checked = $$('input[name=choose_one]:checked');
    if ( checked.length > 0 && checked[0].value == 'other' ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
  }
});

Note that select is defined using the container div for the whole radio button group and you may also need to change the name value in $$('input[name=choose_one]:checked');

Combo box with checkbox group

Here's another modified version, this time to work with a checkbox group which includes one box with the value 'other':

window.addEvent('domready', function() {
  var select, other;
  select = $('choose_one_container_div');
  other  = $('choose_one_other');
  switchOther();
  select.addEvent('change', switchOther);

  function switchOther() {
    var checked = $$('input[value=Other]:checked');
    if ( checked.length > 0 ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
  }
});

As before you may need to edit the highlighted parts of the code to match the container for the checkbox group and the value of the 'other' checkbox. Note: this is the value, not the displayed text if they are different.

ChronoForms v3

There's an article from The ChronoForms Book describing how to build a Combo box here.

FAQs

Combo box with radio buttons

Combo box with checkbox group

ChronoForms v3