IS Accessing DropList Value Of Sitecore WFFM Control In Javascript Possible?

I am using Sitecore 7.2 with Web Forms for Marketers 2.4. Using wffm form designer I created a form that has a droplist in it. I want to be able to hide or unhide another field in

Solution 1:

I've never used the export functionality so can't comment to it's effectiveness or ease of use. My suggestion would be to simply use from custom css classes and jquery on the front-end to hide/show depending on the selected value.

1. Create 2 new css classes under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes. Call them "hide-dependent" and "dependent-field"
2. Add your fields and then on the country field select "hide-dependent" as the CSS class, and for the City select "dependent-field"
3. Add the following Javascript to your own sites js file.

The code will bind a handler to fire onchange, checked the selected value and then hide/show all field with the dependent-field class. Specifying the chained field-border ensures that we are hiding the whole row and not just the select box.

(function ($) {
    var HideDependentFied = function (value) {
        var condition = (value == "USA");
        $(".dependent-field.field-border").toggle(condition);
    };

    $(document).ready(function() {
        var $field = $(".hide-dependent.field-border select");
        $field.on("change", function() {
            HideDependentFied(this.value)
        });
        HideDependentFied($field.val());
    });
})($scw);

The above code is using an Immediately Invoked Function Expression and passing is $scw, which is the jQuery variable used by WFFM.

You may also want to fire the function on document ready, to ensure the field is hidden on load and only shown when the appropriate value is selected.