Dependencies between forms

Hello @imontero,

The dependencies affect only to the fields in the same form, however the behavior you want apply is easy to implement,

For example, insert the second and third forms into their own div tags, hidden by default:

<div style="display:none;" id="my_second_form">[CP_CALCULATED_FIELDS id="2"]</div>
<div style="display:none;" id="my_third_form">[CP_CALCULATED_FIELDS id="2"]</div>

And then, assuming that the dropdown field in the first form is the fieldname1, whose choices’ values are: 1, 2 and 3, and you want to display the second form if the choice with value 2 is selected, and the third form if is selected the choice with value 3.

– Assign an unique class name to this DropDown field: my-dropdown (the classes are assigned to the fields through their attributes “Add CSS Layout Keywords”)

– Insert a “HTML Content” field in the first form with the piece of code:

<script>
jQuery(document).on('change', '.my-dropdown select', function(){
jQuery('#my_second_form,#my_third_form').hide();
var v = $(this).val();
if(v == 2) jQuery('#my_second_form').show();
if(v == 3) jQuery('#my_third_form').show();
});
</script>

Best regards.

Thanks a lot for your answer.
I have implemented it, but I couldn′t make it work… Did I miss something?

https://tribbius.com/prueba-formulario/

Hello,

My fault, please, replace the $ symbol by jQuery, as follows:

<script>
jQuery(document).on('change', '.my-dropdown select', function(){
jQuery('#my_second_form,#my_third_form').hide();
var v = jQuery(this).val();
if(v == 2) jQuery('#my_second_form').show();
if(v == 3) jQuery('#my_third_form').show();
});
</script>

Best regards.

Thanks! Now it′s working ok!

Thank you too!
Extremely useful!