我使用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");
}
我可以得到'Hello!' alert每次都显示,但不是'ending' alert,而且'a'的值总是空的。
我想做的是什么,甚至可能在Sitecore?
我读到别的东西,说他们有一个问题,因为封装和保护水平。我还可以确认,当我提交表单时,它确实显示在WFFM报告中,所以我知道它是正确提交的。
任何帮助/建议/指导都将不胜感激。
我从来没有使用过导出功能,所以不能评论它的有效性或易用性。我的建议是简单地使用自定义css类和jquery在前端隐藏/显示取决于所选的值。
- 在
/sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes
下新建2个css类。将它们命名为"hide-dependent"one_answers"dependent-field" - 添加您的字段,然后在国家字段选择"hide-dependent"作为CSS类,并为城市选择"dependency -field"
- 添加以下Javascript到你自己的站点的js文件。
代码将绑定一个处理程序来触发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);
上面的代码使用了一个立即调用的函数表达式,并传递了$scw,这是WFFM使用的jQuery变量。
您可能还希望在文档准备就绪时触发该函数,以确保该字段在加载时隐藏,仅在选择适当的值时显示