IS Accessing DropList Value of Sitecore WFFM Contr

问题:

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 the same form based on the selected value of the droplist. Through my research I came up with exporting the form (via form designer export) and pointing the sublayout to that exported form. I then added and onChange event to the droplist.

<cc3:droplist runat="server" title="Country" emptychoice="True" id="field_xyz" cssclass="scfDropListBorder fieldid.%7bxyz%7d name.Country" controlname="Country" fieldid="{xyz}" enableviewstate="False" onchange="checkField()">

I then added a javascript to the bottom of the page.

function checkField() {
  alert("Hello! I am an alert box!!");
  var a = document.getElementById("field_xyz");
  alert(a.options[a.selectedIndex].value);
  var cityTextBox = document.getElementById("field_abc").parentNode.parentNode;
  if (a == "United States") {
    cityTextBox.style.display = "block";
  } else {
    cityTextBox.style.display = "none";
  }
  alert("Ending Script");
}

I can get the 'Hello!' alert to show every time but not the 'ending' alert and the value of 'a' is always null from what I can tell.

Is what I'm trying to do even possible in Sitecore?

I read something else that said they had a problem because of encapsulation and protection levels. I can also confirm that when I submit the form it does show up in the WFFM reports so I know it is submitting properly.

Any help/advice/direction would be appreciated.

回答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.