50
Web Forms for Marketers 2.3 for Sitecore CMS 6.5-6.6 Reference Guide
Sitecore® is a registered trademark. All other brand and product names are the property of their respective holders. The contents of
this document are the property of Sitecore. Copyright © 2001-2014 Sitecore. All rights reserved.
Page 80 of 84
4. Add the required tags to the .ascx file according to step 3 of chapter 3.13 How to Add an ASCX
Control to the Page.
For more information about adding presentation components statically, see chapter 3.15 How to Add an
ASCX Control to the Page and the
Developer’s Cookbook
, section 7.4 Statically Placing Sublayouts and
XSLT Renderings.
To add a form dynamically, add the form to the item presentation:
1. Create a new sublayout item in the Content Editor.
2. Bind it to the form .ascx file (set the Ascx file field value of the sublayout item to the actual .ascx
file path).
3. Add the sublayout to the content item in the placeholder of the item presentation you want
(Content Editor - Presentation - Layout - Details).
How to show or hide a field depending on another field value?
In this example, we will show how you can use exporting to .ascx file. For example, you want a web form
display or hide a field depending on another field value. To implement this, perform the following actions:
1. Create a web form that contains a Single-Line Text field and a Checkbox field.
2. Export the web form to .ascx file.
3. Add the exported web form to a web page.
For more information about this, see the How to Add an ASCX Control to the Page section.
4. In the web control file, find the <input id> tags of the text and checkbox fields, for example:
Text field ID
<input
id="WebUserControl1_field_5339820707D14FAC88D66DCC8F81EB01"
Checkbox field ID
<input
id="WebUserControl1_field_F2ACADD39B3C46A4A3036C63C0D60C3C"
5. Create a client script that shows or hides the text field depending on the selected checkbox
value:
<script type="text/javascript">
var checkbox =
document.getElementById("WebUserControl1_field_F2ACADD39B3C46A4A3036C63C0D60C3C");
var textbox =
document.getElementById("WebUserControl1_field_5339820707D14FAC88D66DCC8F81EB01").parentNode.pare
ntNode;
textbox.style.display = "none";
checkbox.onclick = function () {
if (checkbox.checked) {
textbox.style.display = "block";
}
else {
textbox.style.display = "none";
}
}
</script>
6. Place this code to the end of the .ascx file.
