Hiding fields based on multi choice on page load

Forms
1

Im using the following code to hide sections that are not required based on the multi selection in the 'AreasAffected' field:

    fd.field('AreasAffected').$on('change', function (props) {

        $(fd.field('AE_HSE').$parent.$el).hide();
        $(fd.field('AE_Facility').$parent.$el).hide();
        $(fd.field('AE_Drilling').$parent.$el).hide();
        $(fd.field('AE_Wells').$parent.$el).hide();
        $(fd.field('AE_Ops').$parent.$el).hide();

        for (var i = 0; i < props.length; i++) {
            //show fields if the option is selected
            switch (props[i]) {
                case 'HSE':
                    $(fd.field('AE_HSE').$parent.$el).show();
                    break;

                case 'Facility':
                    $(fd.field('AE_Facility').$parent.$el).show();
                    break;

                case 'Drilling':
                    $(fd.field('AE_Drilling').$parent.$el).show();
                    break;
                
                case 'Wells':
                    $(fd.field('AE_Wells').$parent.$el).show();
                
                case 'Operations':
                    $(fd.field('AE_Ops').$parent.$el).show();                   
            }
        }
    });

Code works well, I just need it to apply/refresh when the page loads on the 'edit' view, as it doesn't hide/show the selected values until something changes (which I understand is due to the $on('change' function), just can't work out how to trigger it on page load to initially apply.

2

Dear @Jaydius,
You can move the code inside of a function, and run it on change, but also when the form first loads. Similar to this - Work with web form fields using JS on Plumsail Forms (public forms) — Public web forms

3

What would I need to change the opening line to, to allow this to work? I tried putting it inside of a function, but didn’t seem to make a difference.

fd.field('AreasAffected').$on('change', function (props) {

4

Dear @Jaydius,
Something like this should work:

function showHideFields(){
        var props = fd.field('AreasAffected').value;
        $(fd.field('AE_HSE').$parent.$el).hide();
        $(fd.field('AE_Facility').$parent.$el).hide();
        $(fd.field('AE_Drilling').$parent.$el).hide();
        $(fd.field('AE_Wells').$parent.$el).hide();
        $(fd.field('AE_Ops').$parent.$el).hide();

        for (var i = 0; i < props.length; i++) {
            //show fields if the option is selected
            switch (props[i]) {
                case 'HSE':
                    $(fd.field('AE_HSE').$parent.$el).show();
                    break;

                case 'Facility':
                    $(fd.field('AE_Facility').$parent.$el).show();
                    break;

                case 'Drilling':
                    $(fd.field('AE_Drilling').$parent.$el).show();
                    break;
                
                case 'Wells':
                    $(fd.field('AE_Wells').$parent.$el).show();
                
                case 'Operations':
                    $(fd.field('AE_Ops').$parent.$el).show();                   
            }
        }
}

fd.field('AreasAffected').$on('change', showHideFields);

showHideFields();
1 Like
5

Works perfectly! Thank you so much for your help.