javascript - 是否可以在 Javascript 中访问 Sitecore WFFM 控件的 DropList 值？

Question

我正在使用 Sitecore 7.2 和 Web Forms for Marketers 2.4。使用 wffm 表单设计器我创建了一个包含下拉列表的表单。我希望能够根据下拉列表的选定值隐藏或取消隐藏同一表单中的另一个字段。通过我的研究，我想出了导出表单(通过表单设计器导出)并将子布局指向导出的表单。然后我将 onChange 事件添加到下拉列表中。

<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()">

然后我在页面底部添加了一段 JavaScript。

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");
}

我可以收到“你好!”每次都会显示警报，但不会显示“结束”警报，并且据我所知，“a”的值始终为空。

我想要做的事情在 Sitecore 中是否可行？

我读到其他一些内容，说他们由于封装和保护级别而遇到问题。我还可以确认，当我提交表单时，它确实显示在 WFFM 报告中，因此我知道它已正确提交。

任何帮助/建议/指导将不胜感激。

Answer 1

我从未使用过导出功能，因此无法评论其有效性或易用性。我的建议是简单地使用前端的自定义 css 类和 jquery 来根据所选值隐藏/显示。

1. 在 /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes 下创建 2 个新的 CSS 类。称它们为“隐藏依赖”和“依赖字段”
2. 添加您的字段，然后在国家/地区字段中选择“hide-dependent”作为 CSS 类，并在“城市”中选择“dependent-field”
3. 将以下 Javascript 添加到您自己的网站 js 文件中。

代码将绑定(bind)一个处理程序来触发 onchange，检查所选值，然后使用 dependent-field 类隐藏/显示所有字段。指定链接的field-border可确保我们隐藏整行而不仅仅是选择框。

(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);

上面的代码使用 Immediately Invoked Function Expression传递的是 $scw，它是 WFFM 使用的 jQuery 变量。

您可能还想在文档就绪时触发该函数，以确保该字段在加载时隐藏，并且仅在选择适当的值时才显示。