Pro Forms Field Display

Ive created a form that has a step method. The first step is the need to select something (lets named it selection B and has two items (item A and item B)) when item B is selected, another select type field (lets name it selection B) will appear. Now, heres the bug, when item A is selected and can proceed to the next step (lets say, information fields will display) and you want to go back since youve selected the wrong item. But when i you back to the previous step, the “selection B” field will display even tho i didnt select the item B. How to prevent this from happening?

The way I understand your setup it should work… Kinda hard to tell without the form itself. Can u export the form as a template? Then I can import on my end and try to find what’s wrong.

Heres the file of the form: form, kindly inspect it if i did something wrong or if i miss something

Indeed there seems to be a bug. When steps are enabled, all fields are set to display none and once a step is active, they are set to display flex. This seems to override the display none set by the conditions. Here is a workaround that works:

  1. Add classes to both dropdowns, I’ve used inquiry-dd and service-dd set up in the CSS Class field:

  2. Open Bricksforge Panel and add a new event like so:

  3. In the Javascript field on the right, click the green </> to open up the editor and paste this into it:

var inquiry = document.querySelector(".inquiry-dd select");
var services = document.querySelector(".service-dd");
var value = inquiry.value;

if (value === "General Inquiry") {
  services.style.display = "none";
}

Basically, whenever a progress button is clicked, we check if the value of the first dropdown is equal to “General Inquiry”. If it is, we set the services dropdown display property to ‘none’.

1 Like

Ive tried it, but its not working. It still has the bug when i select gen inquiry and go to the next step and go back to the previous it will display the second select typ field

it works on my end, did u set up all the classes for both dropdowns? If you have a link to the site I can check if there are any errors in the console. If you trust me enough not to destroy your site, feel free to send logins via PM as well haha, but I understand if you don’t wanna do that :wink:

Here it is on my end: Jam

Yes, ive added the classes on both select type fields
This is the video: Jam

hmm weird, everything seems to be setup correctly, not sure what could be interfering without actually being able to look at it in the backend, sorry :confused:

As you can see on this video Jam everything is setup properly, i havent tried using incognito mode probably a cache issue

You have:
image
but it should be:
image

In your event, under the trigger, change it to “All elements with this selector”:

Try and see if this is the culprit

1 Like

Yes, thats the culprit of the crime. Im glad you found it. Thank you for your help.
Hopefully they will add this kind of feature on the next update.

Haha no worries. Pretty sure Daniele will come up with a fix for this :wink:

1 Like

@manc Thanks very much for your kind help here in the forum. Really appreciated! :slight_smile:

And thanks @bordzee to post this bug. I could reproduce it and its already fixed on my end. Will push the fix asap as new version :slight_smile:

2 Likes