Show/hide container based on dropdown selection

Hello!

I am trying to show/hide a container based on dinamic dropdown selection. I tried to follow this post, but after several days and for any reason it doesn't work. I will apreciate your help!

This is what I did:

Designer

A dropdown field with the following configuration:

Gemeral tab:
Field Name: elige_medio
Field ID: elige_medio

Dinamic Data tab:
Enabled: Yes
Data Path: Medio
Value key: medio_corto
Text key: medio

Events tab:
On =  | '' | Set Options                | dropdown_respuesta | =No hay seleccion
On != | '' | Set Dynamic Options | dropdown_respuesta | ajax

A container with the following configuration:

Label: chronoform-container-26
Type: DIV
Title: Container #26
ID: chronoform-container-26
Class: chronoform-container
Load state: Visible

Inside the container, a dropdown field with this configuration:

General tab:
  Field Name: dropdown_respuesta
  Field ID: dropdown_respuesta

Setup

On load event

DB Read action with:

Model ID: Medio

Conditions:

<?php
return array('Medio.activo' => '1');
?>

Load JavaScript action with:

jQuery(document).ready(function (jQ) {
  jQ('#chronoform-container-26').hide();
  jQ('#elige_medio').change(function () {
    var opt;
    opt = jQ(this).find(':selected').data('Medio.con_pregunta').toString();
    if (opt.length > 0) {
      
      jQ('#chronoform-container-26').show();
    } else {
      
      jQ('#chronoform-container-26').hide();
    }
  });
});

On ajax event

DB Read action with:

Model ID: Data

Conditions:

<?php
  return array( 'medio_corto' => $form->data['elige_medio'] );
  ?> 

Custom Code action with:

<?php
$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
  // no result was found
  $options[] = 'Seleccione Medio/Gremio';
 } else {
  $options = array($form->data['Data']['pregunta'], $form->data['Data']['respuesta1'], $form->data['Data']['respuesta2'], $form->data['Data']['respuesta3']);
  }
echo json_encode($options);
?>

Hi pcarranza,

It's a bit hard to work out exactly where the problem is here?

It looks as though the elige_medio drop-down should be getting the dynamic options correctly and showing them in the form?

I can't work out what happens after that and what exactly the Ajax is doing?

Might is be simpler to remove the container and just use the Show Parent / Hide Parent option is the Events tab?

Bob

Hi Bob,

Thank you for your answer and support.

The elige_medio drop-down gets the dynamic options correctly and shows them in the form (but for any reason, when I create the database table with the Chronoforms option this field is not created and its value doesn't save into the table).

I am using a container (and a Load JavaScript action) because I don´t know the value the dropdown option will have in order to use the Show Parent / Hide Parent option is the Events tab to show/hide the dropdown_respuesta dropdown field.

Am I correct?

Patricio


PS: Unfortunately, it seems that PayPal.me is not available from Argentina yet.😟

Hi Patricio,

When you create a table ChronoForms tries to pick up the input names from the form HTML. If one is missing then you can use one of the empty rows on the Create Table page to add it (or you can edit the table in PHPMyAdmin).

If you are only checking if an event is set or not then the Events tab settings will probably work. If not, then you can use Custom JavaScript to trigger the show() /hide(). But I don't think that the onChange event is fired when an Ajax response is returned so you would have to hand-code the Ajax call and run the show/hide when a result is returned.

I'm still not completely clear what you are trying to do here so apologies if I've got this wrong.

Bob

Hi Bob,
Don`t worry, I'm sure the problem is my poor English. Let me try to explain it in a simpler manner:

I have a table with this fields (and some more fields, of course):
TableA: Field1, Field2, Field3, Field4, Field5, Field6

The form has:
DropdownA
DropdownB (at this time, into a container)

I use the TableA to dynamically fill the options of DropdownA with fields Field1 and Field2 as option and value.

When a selection in DropdownA is done, I fill the DropdownB options with Field4, Field5 and Field6 of the selected record via an Ajax event.

Until here everything works fine.

And here starts the problem: I want to show or hide DropdownB based on the value of Field3 (1/0) of the record selected in DropdownA.

Hope this helps to better understand my need.

Patricio

Hi Bob,

I was trying to find a way to reach my goal, but still unsuccessfully. I will appreciate any idea or guidance in order to find a solution.

Best regards,

Patricio

And here starts the problem: I want to show or hide DropdownB based on the value of Field3 (1/0) of the record selected in DropdownA.

Hi Patricio,

If "Field3" is not in the form then you can't use it in any form events.

Regards,
Max

Hi Max,

Thank you for your response. Shoud I try to load "Field3" value into a form field (i.e. Hidden Field)? I don't know how to do that, but I will try.

Thanks again and regards,

Patricio

Hi Patricio,

I'm still not clear what the question is here. If it is that the column hasn't been added to the database table then you can do it manually using PHPMyAdmin - or you can add extra columns in the CF Create table form using the rows at the end.

The data from a hidden drop-down may not submit with the form - but that shouldn't be a problem.

Bob

Hi Bob,

I solved the first problem creating the column manually. Thank you.

The other problem (the main one) is how to show/hide a div container (that contains a dropdown field called "B") based on the value of another column from the same row of the value selected in a dropdown field called "A".
For example, I have a table with the columns 1 and 2. I use column 1 to populate DropDownA, but I want to show/hide DropDownB based on the value of column 2 that is in the same row of the value selected in DropDownA but is not used or present in any field of the form.

Thanks a lot for your constant help newbies like me.🙂

Best regards,

Patricio

Hi Patricio,

That's a job for custom coding I'm afraid.

I would probably load both column 1 & column 2 with DB Read statement, then use a custom code action to generate an options list where the options include a data attribute. See this CFv4 FAQ for an example. Then you can use JavaScript in the form to check the data value of the selected option and show-hide the second drop-down as needed.

Thinking about it, instead of creating custom options you could put the column1 & column2 values into a JavaScript array and use that to look up the values you need. It still needs custom code but is simpler than adding the data to the options.

There might be another way too - can you give an example of the entries in the first drop-down and the matching column2 value?

Bob

Hi Bob,

First of all, I apologize for the delay answering you, but I was with a little illness. I'm good now.

Thank you for your tips. In response to your last question:

The first drop-down (column1) has a string:

Las Arenas
Continental
Posada del Mar

The column2 has a number:

1
0
1

The goal is to show the other drop-down if column2 is a 1 (because selection is 'Las Arenas' or 'Posada del Mar') or hide it if column2 is a 0 ('Continental' was selected).

I hope this clarify my question.

Best regards,

Patricio

Hi Patricio,

i think that I would do this by using a Custom Code action to build the options for the first drop-down and add a data attribute to each option like this <option value='Las Arenas' data-show='1' >Las Arenas</option>

Then you can use JavaScript to check the data value for the selected option and hide/show the second drop-down. This Faq has a similar method - though written for CFv4 not CFv5.

Another method might be to build an array of JavaScript objects to hold the values if that is included on the form page then again you can look up the value when the first drop-down changes.

Bob

Hi Bob,

Thank you for your response. I will follow your suggestions and let you know the results.
Thank you again and best regards,

Patricio