Sitecore WFFM Dropdown show and hide based on parent dropdown

Question

Can someone share sample code on how to show child dropdown based on value in parent dropdown in Sitecore WFFM please?

Also, any idea how to do custom validation on multiple dropdowns? Thanks

Answer 1

The easiest way to implement this behavior is using custom javascript code added in the Footer field of your WFFM form, but this approach requires to disable the removal of scripts from Rich Text Editor fields (not recommended for security reasons!).

If you really want to go with this approach though, you can disable the removal of scripts changing the value of the HtmlEditor.RemoveScripts setting to false.

<!-- HTML EDITOR REMOVE SCRIPTS
If true, the rich text editor removes script tags and inline scripts from RTE field values before saving. Setting the value to true reduces the potential for cross-site scripting and other script-related issues.
Default value: true
-->
<setting name="HtmlEditor.RemoveScripts" value="false" />

This is an example of javascript code to display the child dropdown DIV section only when a specific value of the parent downdown field is selected (Parent Value B in my example):

var parentDropdownInput = document.getElementById("main_0_centercolumn_0_form_7ED5B3152D4844E4A0A1DACDC2ABFF00_field_ABF65697BBC941F5A9AFC105CF892210");
var childDropdownDiv = document.getElementById("main_0_centercolumn_0_form_7ED5B3152D4844E4A0A1DACDC2ABFF00_field_ECF34F57675B4DB6907E7CD6FCFBD58Dscope");

if (parentDropdownInput.value == "Parent Value B")
{
    childDropdownDiv.style.display = "block";
}
else
{
    childDropdownDiv.style.display = "none";
}

parentDropdownInput.onchange = function() {
    if (this.value == "Parent Value B")
    {
        childDropdownDiv.style.display = "block";
    }
    else
    {
        childDropdownDiv.style.display = "none";
    }
}

For the custom validation, you will need to implement it using custom Javascript code as well.