Conditional visibility of form fields

Attributes
1

Hi everyone!
I’m creating a webflow form with multiple dropdowns, and I need some dropdowns to be visible based on the input of a previous dropdown.
For example: dropdown 1 is “project type”, dropdown 2 will only appear if project-type-one is selected, dropdown 3 will appear only if project-type-two is selected, while if project-type-three is selected there are no extra dropdowns appearing.

Thank you soooo much in advance!

1 Like
2

Hey @bygloria.studio! This can be achieved with some JS, if you share a link I can write this for you

1 Like
3

You’re a dreeeam! Thank you so so much Luis :face_holding_back_tears:
The form is on the “Submit a project” page, here’s the live link and the preview link below.
https://preview.webflow.com/preview/high-ambition-climate-collective?utm_medium=preview_link&utm_source=dashboard&utm_content=high-ambition-climate-collective&preview=f8dae2507f1a3fd65302cb73f05a68a8&workflow=preview

4

Thank you @bygloria.studio! I missed one detail, can you please show me which dropdown should control which dropdowns? :sweat_smile:

A quick loom or an image is fine!

5

Hiii Luis! Sorry i didn’t receive any notifications so i missed your reply!!
Here’s the image of the dropdowns :muscle: (from the second one you see in the image, they should all have a conditional visibility)

Screenshot 2024-08-07 at 17.52.11
Screenshot 2024-08-07 at 17.52.111276×968 41.4 KB

6

Thank you @bygloria.studio!

Can you please test this code and let me know if this is what you’re looking for?

The script should be placed on the </body> of your page

<script>
  window.onload = function () {
    console.log('Window has loaded!');

    // Select the dropdowns
    const dropdowns = {
      projectType: document.getElementById('Project-type'),
      energyType: document.getElementById('Energy-and-infrastructure-type'),
      distributedEnergyResource: document.getElementById('Distributed-energy-resource-type'),
      electrificationUseType: document.getElementById('Electrification-end-use-type'),
      microgridType: document.getElementById('Microgrid-technology-type'),
    };

    // Hide and clear values of dropdowns
    const hideAndClearDropdowns = (...elements) => {
      elements.forEach((el) => {
        el.parentElement.style.display = 'none';
        el.value = ''; // Clear the value of the dropdown
      });
    };

    // Display or hide dropdown based on condition
    const toggleDropdown = (dropdown, condition) => {
      dropdown.parentElement.style.display = condition ? 'block' : 'none';
      if (!condition) dropdown.value = ''; // Clear value if hidden
    };

    // Initial hiding and clearing of dropdowns
    hideAndClearDropdowns(
      dropdowns.energyType,
      dropdowns.distributedEnergyResource,
      dropdowns.electrificationUseType,
      dropdowns.microgridType
    );

    // Listen to changes on dropdowns
    dropdowns.projectType.addEventListener('change', () => {
      toggleDropdown(dropdowns.energyType, !!dropdowns.projectType.value);
    });

    dropdowns.energyType.addEventListener('change', () => {
      const value = dropdowns.energyType.value;

      hideAndClearDropdowns(
        dropdowns.distributedEnergyResource,
        dropdowns.electrificationUseType,
        dropdowns.microgridType
      );

      switch (value) {
        case 'Distributed energy resource':
          toggleDropdown(dropdowns.distributedEnergyResource, true);
          break;
        case 'Electrification end use':
          toggleDropdown(dropdowns.electrificationUseType, true);
          break;
        case 'Microgrid technology':
          toggleDropdown(dropdowns.microgridType, true);
          break;
        default:
          console.log('No value selected for infrastructure type');
          break;
      }
    });
  };
</script>
1 Like
7

This is amazing!! Thank you so so much!
The only thing I noticed is that if I select Project type: energy & infrastructure, but then change my mind and select another project type value, the energy & infrastructure type dropdown doesn’t clear nor close. Should I do something like this? :eyes:

dropdowns.projectType.addEventListener('change', () => {
      const value = dropdowns.projectType.value;

      hideAndClearDropdowns(
        dropdowns.distributedEnergyResource,
        dropdowns.electrificationUseType,
        dropdowns.microgridType,
        dropdowns.energyType
      );

      switch (value) {
        case 'Energy and infrastructure':
          toggleDropdown(dropdowns.energyType, true);
          break;
      }
8

Hey @bygloria.studio! Yes, but the energy type dropdown will only appear when the project type is “Energy and infrastructure”

1 Like