Showing/hiding fields

Forms
1

Hi everyone,
Is there a way through the WYSIWYG editor to have conditional hide/show off a selection of a question response.

i.e.
Is this a business registration?
If its Yes, then organisation fields are shown etc.

I have read a lot of coding to do the conditions, but those posts were in the past, and i'm hoping not to have to learn the coding needed, and have staff be able to create the forms on their own.

Thanks in advance.

2

Dear @JMMSSAU,
We have plans for this functionality, but it's not here yet. We can offer paid support to add it as soon as possible, if you're interested contact us at support@plumsail.com with the required functionality.

Coding can do it for you right now and we have a lot of tutorials, including this one - Work with web form fields using JS on Plumsail Forms (public forms) — Plumsail Web Forms Documentation

3

Hi, Thankyou for the message !!.
Ill checkout the coding page you sent through and give it a go, and if we need it will contact support. Im sure a few people would be keen for the functionality!!

4

Hi @Nikita_Kurguzov ,

Ive been going over come of the code on the site you sent, but have a few questions.

When you press save on the JS, and open the preview, how quickly should the changes take affect?

reason being is that i put across the following, which hopefully would pull the calue from IsThisReferralForYourselfOrSomeoneElse, and by default set the fields to hidden unless the value of the field is 'A Client' (which is one of the radio button selections)

However i am getting weird results, from no change, to having a field ORganisation appear. which is not the current and saved form. the saved has 4 fields as per the code, and all spelt correctly. so im wondering if a cached version is being brought up.

fd.rendered(() => {

    function HideShowOrgFields() {
        if (fd.field('IsThisReferralForYourselfOrSomeoneElse').value == 'A Client') {
            // Show the Org fields
            fd.field('Org').hidden = false;
        } else {
            // Hide the Org fields
            fd.field('Org').hidden = true;
        }
    }

    // Calling HideShowOrgFields when the Start Date value changes
    fd.field('IsThisReferralForYourselfOrSomeoneElse').$on('change',HideShowOrgFields);

    // Calling HideShowOrgFields on form loading
    HideShowOrgFields();

});
5

So Sorry.
It seems there are cache issues, and so i've had to make sure im using the same Chrome window to go between the Design mode, JS and the close and re-open the Preview.

The code is now working, hiding and showing fields accordingly.

1 Like
6

@Nikita_Kurguzov
Sorry to bug you on this one, im just at the next road block.

So i have 10 fields that i want shown only when a certain radio is selected.
My adjustment of the code that was working, was to have all the fields hidden, then turn them on when the radio is changed etc. however my logic i think is missing a tad.

Below is the current code i was trying, but is not hiding anything at all, and not changing anything.

(I did think about having multiple functions instead, however i felt it would be cleaner to have one)

fd.rendered(() => {

function HideShowFields() {
    if (fd.field('ReferralFor').value == 'A Client') {
        // Show the Org fields
        fd.field('Org').hidden = false;
        fd.field('OrgContactName').hidden = false;
        fd.field('OrgContactNum').hidden = false;
        fd.field('OrgEmail').hidden = false;
        fd.field('CSCNumber').hidden = false;
    } else
        if (fd.field('ReferralFor').value == 'My Self') {
            fd.field('Relation').hidden = false;
            fd.field('OwnName').hidden = false;
            fd.field('OwnContact').hidden = false;
            fd.field('ContactAvailability').hidden = false;
            fd.field('AltContactQuestion').hidden = false;
        } else
            if(fd.field('ReferralFor').value == 'Family Member') {
                fd.field('Relation').hidden = false;
                fd.field('OwnName').hidden = false;
                fd.field('OwnContact').hidden = false;
                fd.field('ContactAvailability').hidden = false;
                fd.field('AltContactQuestion').hidden = false;
            } else 
                if(fd.field('ReferralFor').value == 'Someone Else') {
                    fd.field('Relation').hidden = false;
                    fd.field('OwnName').hidden = false;
                    fd.field('OwnContact').hidden = false;
                    fd.field('ContactAvailability').hidden = false;
                    fd.field('AltContactQuestion').hidden = false;                   
                } else {
                    fd.field('Org').hidden = true;
                    fd.field('OrgContactName').hidden = true;
                    fd.field('OrgContactNum').hidden = true;
                    fd.field('OrgEmail').hidden = true;
                    fd.field('CSCNumber').hidden = true;
                    fd.field('Relation').hidden = true;
                    fd.field('OwnName').hidden = true;
                    fd.field('OwnContact').hidden = true;
                    fd.field('ContactAvailability').hidden = true;
                    fd.field('AltContactQuestion').hidden = true;                    
                }
}
// Calling HideShowFields when the Start Date value changes
fd.field('ReferralFor').$on('change',HideShowFields);

// Calling HideShowFields on form loading
HideShowFields();
});