Form submition does not save ‘hide’ class

Hello @slandoulsi,

Our plugin does not remove the fields with the “hide” class assigned, only the dependent fields that are not active, for example, if you defined the fieldname2 field, as dependent of the choice selected in the radio buttons field: fieldname1. If the corresponding option in the fieldname1 field is not ticked, the fieldname2 would be inactive, and won’t be submitted to the server side (the plugin mark this fields with the class name: ignore)

Could you send me the link to your form to check your code, please?

Best regards.

Hi,

You will have to register first please to access the form.

Please use this link to register
https://dafteam.tn/wp/register/

then go to the following url to open the form
https://dafteam.tn/wp/business-plan-initial/

Then go to the “Charges de Personnel” page and click on “Ajouter une catégorie de personnel”. This will remove the hide class of the personnel2 class field.

Move to last page and submit the form by clicking on “Réglement”.
Click on “Mon compte”, then on “Mes business plans” tab, then on “Modifier”. This latest is the dex_printable_content table.

Come back to the “Charges de Personnel” page of the form. You will notice that personnel2 class field is now hidden despite the fact that it was unhidden when the form has been submitted.

Thanks for your help.

Regards,
SkL

Hello,

Could you send me an username and password for testing, please?

But remember after submit the form, the page is reloaded, so, the fields’ properties are restored to their default values.

Best regards.

Hi

Please use
testclient
$Azerty1234

Regards,
SkL

Hello,

The issue is simple, you are displaying/hiding the files programmatically by yourself using CSS instead to use dependencies.

For example, assuming you have a hidden checkbox field, where each choice has assigned one block of fields as dependent field, and then from the button: “Ajouter une catégorie de personnel”, you simply tick the corresponding choice, and call the onchange event in the checkbox, and from the button: “Supprimer cette catégorie de personnel” you untick the corresponding choice and call again the onchange event. Following this logic the blocks of fields are displayed or hide too, but this time when the form is loaded by default, the checkboxes that where submitted would be ticked, and the corresponding blocks of fields visibles.

Best regards.

Hello again,

This is a smart solution! I immediatly tried it and it works, thanks. Unfortunatly, it has a major drawback which I’m already struggling with: fields with dependencies become very very slow… Ticking the hidden checkbox takes time and this is not good for end user experience. Do you have please any recommendation to improve this ?

Thanks again

Regards,
skander

Hello,

In this case as your project is really complex, there is another solution, for example, you know the fields that are hidden, for example, assuming that the additional blocks include the required fields: fieldname1, and fieldname2 (these fields names are hypothetical)

You can insert a “HTML Content” field in the form, with a piece of code similar to the following one, as its content:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
var $ = fbuilderjQuery;
if($('[id*="fieldname1_"]').val() !== '' )
{
/* Display the block that contains the fieldname1 */
}

if($('[id*="fieldname2_"]').val() !== '' )
{
/* Display the block that contains the fieldname2 */
}

});
</script>

of course in the previous code you should replace the comments lines with the code that display the blocks of fields.

Best regards.

Hello,

I thought you meant something like that but it didn’t work… did I miss something ?

<script>
fbuilderjQuery(document).one(‘showHideDepEvent’, function(){
var $ = fbuilderjQuery;
if($(‘[id*=”fieldname745_”]’).val() !== ” )
{
jQuery(‘.personnel2’).removeClass( ‘hide’ );
}
if($(‘[id*=”fieldname766_”]’).val() !== ” )
{
jQuery(‘.personnel3’).removeClass( ‘hide’ );
}

});
</script>

Regards,
Skander

Hello,

Please, try with the following code:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
var $ = fbuilderjQuery;
setTimeout(function(){
if($('[id*="fieldname745_"]').val() !== '' ) jQuery('.personnel2').removeClass( 'hide' );
if($('[id*="fieldname766_"]').val() !== '' ) jQuery('.personnel3').removeClass( 'hide' );
}, 1000);
});
</script>

Best regards.

yesssss !!!!

Thanks a lot !