Show/hide GROUP effect in a form

[MaJu]

Hi everyone,
in a FORM I can show/hide GROUPS of fields/elements with inline javascript on a field/element.
The problem is that as soon as you enter the FORM these are all visible at first (then they disappear but at the beginning they are visible). It is not nice for the user to see this dynamic.
Is there a way to enter the FORM and see only one group? Then the others will appear based on the value of the fields/elements.

I can't use TAB/FORM.

Thanks to everyone

 

[startpoint]

Try to hide with css, e.g. display: none.

 

[achartier]

Yes, I have had this issue in the past. The problem is that the element javascript doesn't run until Fabrik is initialized, which doesn't happen until the DOM is ready.

As @startpoint siad, add some css to hide the groups/elements that will initially not be displayed, then your element javascript will show them as required.

 

[johnonorvic]

To do this, I set the groups to be hidden at first, using the group's "Layout"::"Show in form/details" setting. It has "Yes, but 'hidden'" and other choices. There is a popup comment that explains the various options.

 

[MaJu]

Ok thank you for suggestion but I can't use CSS. With this code I can hide/show an elements:
var form = Fabrik.getBlock('form_15');


var val1 = form.formElements.get('fca_form_fill___FORM_show_elements').getValue();


if (val1 == 'pippo' ) {


form.formElements.get('fca_form_fill___FORM_studi_in_corso').hide();


} else {


form.formElements.get('fca_form_fill___FORM_studi_in_corso').show();


}

 

[MaJu]

It'is possible with inline javascript hide/show a group of elements.
Witch is the correct inline JS to use ? Thank

 

[achartier]

You can also add the class fabrikHide to the groups and then use the element javascript to unhide them as needed.

 

[MaJu]

Thank you for the reply.
I'm a new user of Fabrik and I don't know the framework well. A javascript's sample would have been helpful. I think the function of the forum is to be of help to the entire community. I want to publish the inline javascript that I prepared. Maybe it can be useful to others too.

var campo = $('#fca_form_fill___FORM_conferma');
var gruppo = $('#group15');

if (campo.length && gruppo.length) {
if (campo.val() === "1") {
gruppo.show();
} else {
gruppo.hide();
}
}

I know well that in the "javascript" TAB of fields/elements there is a ready-made function: "on load : [When this element "FORM_rif_id_form" == "0", hide group "GRUPPO_XYZ"].

However, when it is necessary to load many javascripts it becomes "uncomfortable" to create N javascripts. I think it's easier to create a single inline javascript to perform N checks and N actions.

At this point I'll ask you a question. Using this inline javascript on a field/element, does the field validation function "VALIDATE HIDDEN = ON" work or not?

Thank you to all.