Forums

I have a form where there are two checkboxes, when you select the second checkbox, a hidden DIV becomes visible. Inside this hidden DIV there are 12 more checkboxes. At least one of those checkboxes must be selected to move on.

With the first two checkboxes, I am using class="validate['group[1]']" which works great to force the user to choose between the first two options.

I tried using class="validate['group[2]']" on the checkboxes in the hidden DIV, but if the DIV remains hidden, it is still forcing the validation. So you can't move on, unless you open that DIV and select at least one option.

How do I validate the checkboxes in the hidden DIV only if the hidden DIV is opened?

Thanks,
Melvins138

BTW: I am using the hide DIV script from this FAQ with ChronoForm

Hi Melvins,

You need to add code to disable (and probably uncheck as well) the checkboxes when they are hidden; and un-disable them when they are shown again. The validation code used in CFv4 ignores disabled inputs. You can see the textarea lines there already e.g.

    textarea.value = '';
    textarea.disabled = true;

Bob

Thanks Bob.

I guess my question is, what is the disabling code for checkboxes? Is that something I need to modify in the hide DIV code? Is that an additional code that I should put in in a separate "LoadJS" event? I'm not a strong programmer, so I'm not sure where to begin.

Here is the disabling code I am using:

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  checkboxes['checkbox_1'] = 'textarea_1';
  checkboxes['checkbox_MOV'] = 'textarea_MOV';
  checkboxes['checkbox_LTC'] = 'textarea_LTC';
  checkboxes['checkbox_PAC'] = 'textarea_PAC';
  checkboxes['checkbox_LEC'] = 'textarea_LEC';
  checkboxes['checkbox_RUS'] = 'textarea_RUS';
  checkboxes['checkbox_LCC'] = 'textarea_LCC';
  checkboxes['checkbox_NLS'] = 'textarea_NLS';
  checkboxes['checkbox_SNP'] = 'textarea_SNP';


  for ( i in checkboxes ) {
    checkbox = $(i);
    textbox = $(checkboxes[i]);
    div = $(textbox.id + '_container_div');
    div.dissolve();
    showHide(i);
    addEventToCheckbox(checkbox);
  }

  function addEventToCheckbox(checkbox) {
    checkbox.addEvent('click', function(event) {
      showHide(event.target.id);
    });
  }
});

function showHide(id) {
  var checkbox, textarea, div;
  if(typeof id == 'undefined') {
    return;
  }
  checkbox = $(id);
  textarea = checkboxes[id];
  div = $(textarea + '_container_div');
  textarea = $(textarea);
  if(checkbox.checked) {
    div.setStyle('display', 'block');
    //div.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
} 

checkbox_1 open a big DIV I have titled textarea_1. I have checkbox_1 and another checkbox set to validate['group[1]']. That larger DIV (textarea_1) contains 16 additional checkboxes (some that open an additional hidden DIV, as you can see with the additional checkbox_* codes) that are set to validate['group[2]'].

So how do I disable those 16 "group 2" checkboxes?

I will send you a private PM with a link to the form so you can see it.

For the general public, here is where you can see the script in action.

If you click Submit, you will get an error to click at least one of the two visible checkboxes. This is because I used validate['group[1]'] in the class. So that works. If you click the first box checkbox (during Annual Election Period), then click submit, you still cannot process the form, because the a checkboxes inside hidden DIV has not been checked because I am using validate['group[2]'] in the class of each of the hidden checkboxes.

If you check the second checkbox (outside Annual Election Period), the hidden div opens. If you click submit without clicking a checkbox inside the now visible DIV, you still can't move forward.

Only once you make a selection inside the gray DIV can you process the form.

Bump.

I really need help with this. Please.

Hi melvins138,

The MooTools code to disable an element is

$('element_id').set('disabled', true);

Bob