Wiki source code of Selektoren

Hide last authors
gru 1.1 1 {{content/}}
2
gru 43.11 3 The [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] allows you to add your own custom {{smallcaps}}Css{{/smallcaps}} to style the form. To apply a certain style only to some form elements, you can use a {{smallcaps}}Css{{/smallcaps}} selector. The [[JavaScript tab>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] lets you use the library jQuery. This library makes use of {{smallcaps}}Css{{/smallcaps}} selectors with some additions. That means that you can use {{smallcaps}}Css{{/smallcaps}} selectors to access elements even when using JavaScript.
gru 1.1 4
gru 43.11 5 See the help pages for the [[JavaScript tab>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] for further details on jQuery.
gru 1.1 6
gru 43.11 7 See the help pages for the [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] for further details on {{smallcaps}}Css{{/smallcaps}}.
gru 1.1 8
gru 43.11 9 This page gives an overview of selectors in general; and which special selectors you can use for forms created with {{formcycle/}}.
awa 27.2 10
gru 43.11 11 == Attribute selectors during form creation ==
gru 1.1 12
gru 43.11 13 === Attribut selector: name ===
gru 1.1 14
gru 43.11 15 You often need to access a certain form element by its name. To do so you can use the following name selector:
awa 30.2 16
gru 1.1 17 {{code language="Javascript"}}
gru 43.11 18 $("[name='tfMail']") // via jQuery (JavaScript tab)
gru 1.1 19 {{/code}}
20
21 {{code language="CSS"}}
gru 43.11 22 [name="tfMail"] { /* via CSS (CSS tab)*/
gru 1.1 23 color: #DDD;
24 }
25 {{/code}}
26
gru 43.11 27 The value of the attribute //name// corresponds to the name of the form element you wish to select. That is, the name you entered in the [[base settings section>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties]] of the properties panel of the {{designer/}}.
gru 1.1 28
gru 43.11 29 These name selectors are a special type of attribute selectors. Attribute selectors offer a way to select HTML element by any attribute or attribute value. HTML elements may have any number of attributes:
gru 1.1 30
awa 30.2 31 {{code language="html"}}
32 <input id="xi-tf-1" class="XItem XTextField" name="tfMail" value="demo@example.com" data-count="9">
gru 1.1 33 {{/code}}
34
gru 43.11 35 You can now select an element by specifying which attribute it should have or what the value one of its attributes should be. An attribute selector consists of two parts and always looks like this:
awa 30.2 36
37 {{code language="css"}}
38 [key="value"]
39 {{/code}}
40
41 ; key
gru 43.11 42 : Name of the attribute. Only elements which have got such an attribute are selected.
awa 30.2 43 ; value
gru 43.11 44 : Value of the attribute. Only elements which have the specified attribute set to this value are selected.
awa 30.2 45
gru 43.11 46 That is, to select all elements that have got an attribute named //value// (irrespective of the value of this attribute), use {{code language="none"}}[value]{{/code}}. To select only the subset of those elements that have the //value// attribute set to //demo//, use {{code language="none"}}[value="demo"]{{/code}}.
awa 30.2 47
gru 43.11 48 === Attribute selector: xn ===
awa 30.2 49
gru 43.11 50 Each form element is put inside a container element. This container consists of the actual form element and additional elements, such as the label for the form element. In case you want to select the container element, use an attribute selector for the attribute //xn// (=xima-name) instead of //name//.
awa 30.2 51
52 {{code language="javascript"}}
gru 43.11 53 $("[xn='tfMail']"); // via jQuery (JavaScript tab)
awa 30.2 54 {{/code}}
55
56 {{code language="css"}}
gru 43.11 57 [xn="tfMail"] { /* via CSS (CSS tab)*/
gru 1.1 58 font-weight: 600;
59 }
60 {{/code}}
61
gru 43.11 62 === Additional attribut selectors ===
gru 1.1 63
awa 30.2 64 {{code language="javascript"}}
gru 43.11 65 // Select all input fields of type "text"
awa 30.2 66 $("input[type='text']")
awa 30.4 67 {{/code}}
gru 1.1 68
awa 30.2 69 {{code language="javascript"}}
gru 43.11 70 // Select all images with an "alt" attribute
71 $("img[alt]")
gru 1.1 72 {{/code}}
73
gru 43.11 74 It is also possible to select those element with an attribute value that ends on a certain expression. To do so, use the operator {{code language="none"}}$={{/code}} instead of the equal sign {{code language="none"}}={{/code}}.
gru 1.1 75
awa 30.18 76 {{code language="javascript"}}
gru 43.11 77 // All links, where attribute "href" ends on ".pdf"
awa 30.2 78 $("a[href$='.pdf']")
79 {{/code}}
80
gru 43.11 81 == Class selectors ==
awa 30.2 82
gru 43.11 83 HTML defines a special attribute named {{code language="none"}}class{{/code}}. Often this is also referred to as a {{smallcaps}}Css{{/smallcaps}} class. This attribute lets you specify one or multiple classes, separated by a space. Within {{smallcaps}}Css{{/smallcaps}}, that lets you apply certain styles to all elements with a given class. With JavaScript, you can apply a certain feature to all elements of a given class. For example, all form elements generated by {{formcycle/}} have always got the class {{code language="none"}}XItem{{/code}} as well as an additional class that depends on the type of the element, such as [[XTextField>>doc:Formcycle.FormDesigner.FormElements.Input]] or [[XUpload>>doc:Formcycle.FormDesigner.FormElements.Upload]].
awa 30.2 84
gru 43.11 85 Classes are used pretty often. There exists a special selector for classes that makes it easier to select elements by their classes. To select all elements with a particular class, use a selector that consists of a period, followed by the name of the class. To illustrate, a simple HTML page could look like this:
awa 30.2 86
87 {{code language="html"}}
awa 30.10 88 <input class="XItem XTextField">
awa 30.2 89 <select class="XItem XSelect">
gru 43.11 90 <option value="">Please select</option>
awa 30.2 91 <option value="1">Option 1</option>
92 <option value="2">Option 2</option>
93 </select>
94 {{/code}}
95
gru 43.11 96 Now you can access these elements with selectors:
awa 30.2 97
98 {{code language="css"}}
gru 43.11 99 /* All elements with the class XItem */
awa 30.2 100 .XItem {
gru 43.11 101 font-size: 20px; /* Set font size to 20 pixels*/
awa 30.2 102 }
103
gru 43.11 104 /* Select only input fields (class XTextField) */
awa 30.2 105 .XTextField {
gru 43.11 106 color: blue; /* Set font color to blue */
awa 30.2 107 }
108 {{/code}}
109
gru 43.11 110 == Working with selected elements ==
gru 1.1 111
gru 43.11 112 Once you have select an element, you can use one of the [[many functions>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AdditionalScriptFunctions.WebHome]] offered by jQuery and {{formcycle/}} to edit their values or modify them in other interesting ways.
gru 1.1 113
114 {{code language="Javascript"}}
gru 43.11 115 // Hide all input fields
116 $("input[type='text']").visible(false)
gru 1.1 117
gru 43.11 118 // Mark the element with the name "tfZip" as a required field
119 $("[name='tfZip']").setRequired(true)
gru 1.1 120 {{/code}}
awa 27.2 121
gru 43.11 122 === Generic JavaScript functionality ===
awa 30.2 123
gru 43.11 124 {{figure image="designer_selectors_prefill_en.png"}}
125 Input fields are prefilled with data from the user that is currently signed in. The user data is read from the object //XFC_METADATA.currentUser//. The attribute //data-user// on the input fields controls which property is taken.
awa 30.2 126 {{/figure}}
127
gru 43.11 128 The {{designer/}} lets you add [[additional classes>>doc:Formcycle.FormDesigner.ElementProperties.CSSClasses]] and [[custom attributes>>doc:Formcycle.FormDesigner.ElementProperties.Attributes]] to a form field. You could write a certain JavaScript feature and apply it to all elements with a particular class or attribute. Then anybody can choose which elements that functionality should be applied by adding the class or attribute in the {{designer/}}. For example:
awa 30.2 129
awa 43.4 130 {{js}}
131 for (const element of $("[data-user]")) {
awa 30.2 132 const prop = element.dataset.user;
133 const value = XFC_METADATA.currentUser[prop];
134 if (value && !element.value) {
135 element.value = value;
136 }
awa 43.4 137 }
138 {{/js}}
139
140 {{jsIE}}
141 $("[data-user]").each(function(_, element) {
142 var prop = $(element).data("user");
143 var value = XFC_METADATA.currentUser[prop];
144 if (value && !element.value) {
145 element.value = value;
146 }
awa 30.2 147 });
awa 43.4 148 {{/jsIE}}
awa 30.2 149
gru 43.11 150 An input field gets the attribute //data-user//. It is set to a value such as //email// or //forename//. The JavaScript from above then checks whether the currently signed in user has got the specified property (email address, first name etc.). If they do, the input field is prefilled with that value. This way you only need to write a JavaScript feature once. If you upload the JavaScript file as [[client resource>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]], it is available to all forms.
awa 30.2 151
gru 43.11 152 == Form element selectors ==
awa 27.2 153
gru 43.11 154 The following selectors are often used when working with {{formcycle/}} forms.
awa 30.9 155
awa 27.2 156 {{table dataTypeAlpha="0"}}
gru 43.11 157 |=Selector|=Description|=Example (jQuery / CSS)
158 |FORM.xm-form|Selects the entire form.|{{code language="javascript"}}$('FORM.xm-form'){{/code}}
awa 27.2 159 \\
160 {{code language="css"}}FORM.xm-form {
161 font-family: Arial;
162 }{{/code}}
gru 43.11 163 |.class|Selects all elements with the given class. For a list of form element classes, see below.|{{code language="javascript"}}$('.XPage'){{/code}}
awa 27.2 164 \\
165 {{code language="css"}}.XPage {
166 background-color: #EEE;
167 }{{/code}}
gru 43.11 168 |.required-star|Selects all elements that represent the small red star that marks form fields as required fields.|{{code language="javascript"}}$('.required-star'){{/code}}
awa 27.2 169 \\
170 {{code language="css"}}.required-star {
171 color: red;
172 }{{/code}}
gru 43.11 173 |.xm-item-div|Each [[Formularelement>>doc:Formcycle.FormDesigner.FormElements.WebHome]] is placed inside a container element. This container element has got the class //xm-item-div//. The container consists of the actual form elements (//<input>//, //<select>// etc.) and additional elements such as the label of the form field. An
174 [[input field>>doc:Formcycle.FormDesigner.FormElements.Input]], for example, consists of a label element and an input element.|{{code language="javascript"}}$('[.xm-item-div]'){{/code}}
awa 27.2 175 \\
176 {{code language="css"}}.xm-item-div {
177 font-size: 1.2em;
178 }{{/code}}
gru 43.11 179 |.C<KLASSE>|As mentioned, all form elements are put inside a container element. Each form element has got a class depending on its type, such as /XInputText//. The container element then gets the class, prefixed with a //C// (=container), such as //CXInputText//. This selector lets you select all containers with form elements of a particular type. See below for a list of classes.|{{code language="javascript"}}$('[.CXTextField]')
awa 27.2 180 $('[.CXCheckbox]')
181 $('[.CXImage]'){{/code}}
182 \\
183 {{code language="css"}}.CXCheckbox label {
184 color: #aaa;
185 }{{/code}}
gru 43.11 186 |.xm-form-row|When you palce multiple form elements next to each other, they are placed inside a container element with the class //xm-form-row//.|{{code language="javascript"}}$('[.xm-form-row]'){{/code}}
awa 27.2 187 \\
188 {{code language="css"}}.xm-form-row {
189 border-style: solid;
190 }{{/code}}
gru 43.11 191 |name|Selects an element with a particular name. This works for all elements, event containers and fieldsets. You should not use this selector for elements that are [[repeatable>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties||anchor="repeat"]]. When an element is repeated, an index is added to the name. Instead, use the attribute //org_name// to select all repeated elements with that name.|{{code language="javascript"}}$('[name=element]'){{/code}}
awa 27.2 192 \\
gru 43.11 193 {{code language="css"}}[name="tfName"]{
awa 27.2 194 font-weight: 700;
195 }{{/code}}
gru 43.11 196 |org_name|When an element is [[repeatable>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties||anchor="repeat"]], each dynamically created elements receives an additional attribute: //org_name//. The //org_name// is always set to the original name of the element, while an index is added to the //name// attribute.|{{code language="javascript"}}$('[org_name=tf1]'){{/code}}
awa 27.2 197 \\
gru 43.11 198 {{code language="css"}}[org_name="tfMail"] {
awa 27.2 199 margin: 2px;
200 }{{/code}}
gru 43.11 201 |xn|Selector the container of a [[Formularelements>>doc:Formcycle.FormDesigner.FormElements.WebHome]] with the given name. Each form element is placed inside a container that also contains additional elements such as the label.|{{code language="javascript"}}$("[xn='tfPhone']"){{/code}}
awa 27.2 202 \\
gru 43.11 203 {{code language="css"}}[xn="XTextArea"] {
awa 27.2 204 font-family: sans-serif;
205 }
206 {{/code}}
gru 43.11 207 |cn|Selects all containers with [[form elements>>doc:Formcycle.FormDesigner.FormElements.WebHome]] of a particular type. See below for a list of classes for each form element type.|{{code language="javascript"}}$('[cn=XPage]'){{/code}}
awa 27.2 208 \\
209 {{code language="css"}}[cn=XTextField]{
210 font-family: serif;
211 }{{/code}}
212 {{/table}}
213
gru 43.11 214 == List of classes ==
awa 30.17 215
gru 43.11 216 Each type of form elements has got a special {{smallcaps}}Css{{/smallcaps}} class that is used in the form. You can use this class to select all elements of a certain type.
awa 30.17 217
awa 43.8 218 {{table dataTypeAlpha="0" preSort="0-asc"}}
gru 43.11 219 |=Selector|=Description|=Example
220 |XHeader|Selects the header element of the form. The header element is always visible at the top of the form, irrespective of which page is currently shown.|{{code language="javascript"}}$(".XHeader']"){{/code}}
221 |XFooter|Selects the footer element of the form. The footer element is always visible at the bottom of the form, irrespective of which page is currently shown.|{{code language="javascript"}}$(".XFooter']"){{/code}}
awa 30.15 222 $("[cn='XPage']"){{/code}}
gru 43.11 223 |XPage|Selects all [[pages>>doc:Formcycle.FormDesigner.FormElements.Page]].|{{code language="javascript"}}$(".XPage']")
224 $("[cn='XPage']"){{/code}}
225 |XContainer|Selects all [[containers>>doc:Formcycle.FormDesigner.FormElements.Container]].|{{code language="javascript"}}$(".XContainer']")
awa 30.15 226 $("[cn='XContainer']"){{/code}}
gru 43.11 227 |XFieldSet|Selects all [[fieldsets>>doc:Formcycle.FormDesigner.FormElements.Fieldset]].|{{code language="javascript"}}$(".XFieldSet")
awa 30.15 228 $("[cn='XFieldSet']"){{/code}}
gru 43.11 229 |XSpan|Selects all [[texts>>doc:Formcycle.FormDesigner.FormElements.Text]].|{{code language="javascript"}}$(".XSpan")
awa 30.15 230 $("[cn='XSpan']"){{/code}}
gru 43.11 231 |XTextArea|Selects all [[text areas>>doc:Formcycle.FormDesigner.FormElements.Textarea]].|{{code language="javascript"}}$(".XTextArea")
awa 30.15 232 $("[cn='XTextArea']"){{/code}}
gru 43.11 233 |XTextField|Selects all [[input fields>>doc:Formcycle.FormDesigner.FormElements.Input]].|{{code language="javascript"}}$(".XTextField")
awa 30.15 234 $("[cn='XTextField']"){{/code}}
gru 43.11 235 |XCheckbox|Selects all form elements of type [[checkbox>>doc:Formcycle.FormDesigner.FormElements.Checkbox]].|{{code language="javascript"}}$(".XCheckbox")
awa 30.15 236 $("[cn='XCheckbox']"){{/code}}
gru 43.11 237 |XSelect|Selects all [[selection elements>>doc:Formcycle.FormDesigner.FormElements.Selection]].|{{code language="javascript"}}$(".XSelect")
awa 30.15 238 $("[cn='XSelect']"){{/code}}
gru 43.11 239 |XLine|Selects all [[lines>>doc:Formcycle.FormDesigner.FormElements.Line]].|{{code language="javascript"}}$(".XLine")
awa 30.15 240 $("[cn='XLine']"){{/code}}
gru 43.11 241 |XImage|Selects all [[images>>doc:Formcycle.FormDesigner.FormElements.Image]].|{{code language="javascript"}}$(".XImage")
awa 30.15 242 $("[cn='XImage']"){{/code}}
gru 43.11 243 |XSpacer|Selects all [[spacing elements>>doc:Formcycle.FormDesigner.FormElements.Spacer]].|{{code language="javascript"}}$(".XSpacer")
awa 30.15 244 $("[cn='XSpacer']"){{/code}}
gru 43.11 245 |XUpload|Selects all [[upload elements>>doc:Formcycle.FormDesigner.FormElements.Upload]].|{{code language="javascript"}}$(".XUpload")
awa 30.15 246 $("[cn='XUpload']"){{/code}}
gru 43.11 247 |XButtonList|Selects all [[buttons>>doc:Formcycle.FormDesigner.FormElements.Button]].|{{code language="javascript"}}$(".XButtonList")
awa 30.15 248 $("[cn='XButtonList']"){{/code}}
gru 43.11 249 |XDropDown|Selects the SELECT element of a select form field (//XSelect//), when its display mode is set to //drop down list//.|{{code language="javascript"}}$(".XDropDown"){{/code}}
250 |XList|Selects the SELECT element of a select form field (//XSelect//), when its display mode is set to //inline list of options//.|{{code language="javascript"}}$(".XList"){{/code}}
251 |XCheckbox|Additionally, this also selects the container DIV elements of select form fields (//XSelect//), when their display mode is set to //checkboxes//.|{{code language="javascript"}}$(".XCheckbox"){{/code}}
252 |XRadio|Selects the container DIV element with all radio buttons of a select form field (//XSelect//), when its display mode is set to //radio buttons//.|{{code language="javascript"}}$(".XRadio"){{/code}}
253 |CXTable|Selects the container DIV element with all questions of a select form field (//XSelect//), when its display mode is set to //questionnaire//.|{{code language="javascript"}}$(".CXTable"){{/code}}
awa 27.2 254 {{/table}}

Navigation

Copyright 2000-2024