Forums

Hi all,

I've run into a problem and i'm kinda stumped, i'm trying to make a form where customers can choose between business and private trough a radio box, when they choose business several extra textboxes should pop up.

I tried some of the older forum posts but nothing worked out so far.😟

Hi keya,

There is a simple example in this FAQ.

Here is a much more complicated one that I wrote recently for a client. It follows the same ideas as the FAQ but handles each input in the divs to be hidden/shown separately.

window.addEvent('domready', function() {
  var acc_radio, nolic_radio, other_radio, yeslic_div, nolic_div, other_div;

  acc_radio   = $('accslyes');
  nolic_radio = $('nolic');
  other_radio = $('accother');
  yeslic_div  = $('yeslic_div');
  nolic_div   = $('nolic_div');
  other_div   = $('other_div');

  acc_radio.addEvent('change', showBlocks );
  nolic_radio.addEvent('change', showBlocks );
  other_radio.addEvent('change', showBlocks );
  showBlocks();

  function showBlocks() {
    if ( acc_radio.checked ) {
      yeslic_div.setStyle('display', 'block');
      $$('#choose_npi input').each(function(item) {
        item.disabled = false;
      });
      $('lic').disabled = false;
      $('lic_state').disabled = false;
    } else {
      yeslic_div.setStyle('display', 'none');
      $$('#choose_npi input').each(function(item) {
        item.disabled = true;
        item.checked = false;
      });
      $('lic').value = '';
      $('lic').disabled = true;
      $('lic_state').value = '';
      $('lic_state').disabled = true;
      $('npi').value = '';
    }
    if ( nolic_radio.checked ) {
      nolic_div.setStyle('display', 'block');
      $$('#choose_npi_nolic input').each(function(item) {
        item.disabled = false;
      });
      $('certnolic').disabled = false;
    } else {
      nolic_div.setStyle('display', 'none');
      $$('#choose_npi_nolic input').each(function(item) {
        item.disabled = true;
        item.checked = false;
      });
      $('certnolic').checked = false;
      $('certnolic').disabled = true;
      $('npi_nolic').value = '';
    }
    if ( other_radio.checked ) {
      other_div.setStyle('display', 'block');
      $('certother').disabled = false;
    } else {
      other_div.setStyle('display', 'none');
      $('patient').checked = false;
      $('investor').checked = false;
      $('none').checked = false;
      $('other_desc').value = 'Please Describe';
      $('certother').checked = false;
      $('certother').disabled = true;
    }
  }
});

In each case, when the block is hidden (a) any values are removed and (b) any required inputs are set to disabled so that the validation is 'turned off' while they are hidden. When the block is shown again the same inputs are set to enabled.

Bib

Hi

Do I understand the script right that you have three different radio box elements with only one value each in the form?

Roger