是否可以在Javascript中访问Sitecore WFFM控件的DropList值? [英] IS Accessing DropList Value of Sitecore WFFM Control in Javascript Possible?

问题描述

我正在将Sitecore 7.2与用于Marketers 2.4的Web窗体一起使用. 使用wffm表单设计器，我创建了一个包含下拉列表的表单. 我希望能够基于下拉列表的选定值以相同的形式隐藏或取消隐藏另一个字段.通过我的研究，我想出了导出表单的方法(通过表单设计器导出)，并将子布局指向该导出的表单. 然后，我将onChange事件添加到了下拉列表中.

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

然后我在页面底部添加了一个javascript.

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

我可以得到你好！"警报显示每次但不显示结束"警报，根据我的判断，"a"的值始终为空.

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.

我正在Sitecore中尝试做些什么吗?

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

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

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.

推荐答案

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

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

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.

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

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

上面的代码使用的是立即调用的函数表达式，传递的是$ scw，这是WFFM使用的jQuery变量.

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.

这篇关于是否可以在Javascript中访问Sitecore WFFM控件的DropList值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！