show N containers dynamically based on selected number

Hi,

I'm wondering how hard it would be to modify my form so that when a number is chosen from a drop-down, it causes that number of identical field groupings (containers) to be shown below. The number would be 1-9.

thanks,
JC

Hi JC,

Here's some JavaScript that I wrote recently to do something very similar. There were just four elements here, this code can be extended, or the repeated stuff in the switch could probably be added to a function

jQuery(document).ready(function(jQ) {
  hidePanel('#traveller_1');
  hidePanel('#traveller_2');
  hidePanel('#traveller_3');
  hidePanel('#traveller_4');
  jQ('input:radio[name=travellers]').on('click', function(el) {
    var travellers;
    travellers = jQ('input:radio[name=travellers]:checked').val();
    //console.log(travellers);
    switch (travellers) {
      case '1':
        showPanel('#traveller_1');
        hidePanel('#traveller_2');
        hidePanel('#traveller_3');
        hidePanel('#traveller_4');
        break;
      case '2':
        showPanel('#traveller_1');
        showPanel('#traveller_2');
        hidePanel('#traveller_3');
        hidePanel('#traveller_4');
        break;
      case '3':
        showPanel('#traveller_1');
        showPanel('#traveller_2');
        showPanel('#traveller_3');
        hidePanel('#traveller_4');
        break;
      case '4':
        showPanel('#traveller_1');
        showPanel('#traveller_2');
        showPanel('#traveller_3');
        showPanel('#traveller_4');
        break;
    }
  });

  function hidePanel(id) {
    var panel, inputs;
    panel = jQ(id);
    inputs = jQ(id + ' :input');
    inputs.val('');
    inputs.prop('disabled', true);
    panel.hide();
  }

  function showPanel(id) {
    var panel, inputs;
    panel = jQ(id);
    inputs = jQ(id + ' :input');
    inputs.prop('disabled', false);
    panel.show();
  }
});

Bob

Thanks for the quick reply. A couple more questions...

What would I use for a drop-down in place of

travellers = jQ('input:radio[name=travellers]:checked').val();

And where do I put this JavaScript code?

JC

Ho JC,

The JavaScript goes into a Load JavaScript action in the form On Load event.

I think that the drop-down equivalent is

travellers = jQ('input:select[name=travellers]:selected').val();

or, I think with a select drop-down that this will work

travellers = jQ('#travellers:selected').val();

using the element id instead of the name.

Bob

OK, much thanks. I will give it a try.

JC

OK, tried and not working yet.

Where you have...

hidePanel('#traveller_1');

Is this the container ID, or an actual number (digits)?

So if my container ID is chronoform-container-1, then the code would be:

hidePanel('#chronoform-container-1');

Is that correct?

thanks

You can ignore the above reply... I found another way, albeit tedious.

First I set all the containers to invisible. Then I used the Event section of the drop-down settings to show the containers based on the number selected in the drop-down (1-9).

Default was to show the first container, container #1, so no work there. To support selection of (2), I had to add 1 event... to display container #2. To support selection of (3), then I had to add 2 events... one to display container #2, another to display container #3. And so on up to 9... 36 events total.

This worked OK, but an enhancement to Chronoforms would be to allow a list of ID numbers per event, each to apply the action to.

Hi JC,

That does sound like a lot of events :-(

Yes - you needed to replace traveller_1, etc with the id of your containers.

Bob