Public Form Hide Grid until a single drop down field value is selected

Forms Public Forms
1

Hi All

How do you get a grid to show/hide until a specific value is selected from a drop-down menu?

I have a drop-down selection box with school names listed, named stCurrentSchool.

I have a grid with the class name "st-bcsdetails" with two further text fields that I'd like to show when the drop-down selection matches, "The Blue Coat CofE School".

Regards

Mark

2

Dear @mloveridge,
A similar example can be found here - Work with fields using JS on Plumsail Forms (public forms) — Public web forms

Just change it a little, to something like this:

fd.rendered(function() {

    function hideOrShowGrid() {
        if (fd.field('stCurrentSchool').value == "The Blue Coat CofE School") {
            // Show the grid
            $('.st-bcsdetails').show();
        } else {
            // Hide the grid
            $('.st-bcsdetails').hide();
        }
    }

    // Calling hideOrShowGrid when the stCurrentSchool value changes
    fd.field('stCurrentSchool').$on('change',hideOrShowGrid);

    // Calling hideOrShowGrid on form loading
    hideOrShowGrid();

});
3

@Nikita_Kurguzov Apologies I did look at the link but just messed up the function.

That code worked perfectly. Thank you.

If you wanted to expand and check two drop-downs so school and single "Year 11" selection in this case, how would the amendments look.

function hideOrShowGrid() {
    if (fd.field('stCurrentSchool').value == "The Blue Coat CofE School" && fd.field('stCurrentYear').value == "Year 11") {
        // Show the grid
        $('.st-bcsdetails').show();
    } else {
        // Hide the grid
        $('.st-bcsdetails').hide();
    }
}

// Calling hideOrShowGrid when the stCurrentSchool value changes
fd.field('stCurrentSchool').$on('change',hideOrShowGrid);

// Calling hideOrShowGrid on form loading
hideOrShowGrid();

I think I have the first part right checking that two conditions are true. Just not sure how the call hideOrShowGrid needs to be as above doesn't work.

Regards

Mark

4

It kind of works if I use

    fd.field('stCurrentSchool' && 'stCurrentYear').$on('change',hideOrShowGrid);

But not consistent so I'm guessing I'm missing the right call/syntax.

Mark

5

Dear @mloveridge,
Not sure how it works this way... You just need to add a second change event to keep track of the changes, like this:

function hideOrShowGrid() {
    if (fd.field('stCurrentSchool').value == "The Blue Coat CofE School" && fd.field('stCurrentYear').value == "Year 11") {
        // Show the grid
        $('.st-bcsdetails').show();
    } else {
        // Hide the grid
        $('.st-bcsdetails').hide();
    }
}

// Calling hideOrShowGrid when the stCurrentSchool value changes
fd.field('stCurrentSchool').$on('change',hideOrShowGrid);

// Calling hideOrShowGrid when the stCurrentYear value changes
fd.field('stCurrentYear').$on('change',hideOrShowGrid);

// Calling hideOrShowGrid on form loading
hideOrShowGrid();
6

@Nikita_Kurguzov

Thanks, I understand the logic you are explaining.

Both field values need to be monitor for the function to apply the hide/show based on the condition which is looking for two matches and if true show the grid class else only one match is possible so the hide is true.

Really appreciate your assistance on this and it is great work provided by the team that monitor this community.

Regards

Mark

1 Like