Changes for page JavaScript-Bereich

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -49,7 +49,7 @@
49	49	sayHello({lastName: "Brown"});
50	50	{{/jsIE}}
51	51
52		-{{formcycle/}} makes use of the JavaScript library jQuery. jQuery is an active library that provides some helper functions, but more importantly, makes it easier to work with HTML elements (the DOM). You can select elements and form fields with [[CSS selectors>>doc:Formcycle.FormDesigner.CodingPanel.Selector]] and work with them by using one the many function provided by jQuery and {{formcycle/}}. It also abstracts native DOM functions, so if you use one of jQuery's functions, you can expect that function to work in the same way across all supported browsers.
	52	+{{formcycle/}} makes use of the JavaScript library jQuery. jQuery is an active library that provides some helper functions, but more importantly, makes it easier to work with HTML elements (the DOM). You can select elements and form fields with [[CSS selectors>>doc:Formcycle.Designer.Form.CodingPanel.Selector]] and work with them by using one the many function provided by jQuery and {{formcycle/}}. It also abstracts native DOM functions, so if you use one of jQuery's functions, you can expect that function to work in the same way across all supported browsers.
53	53
54	54	We currently provide you with the latest version, jQuery 3:
55	55
...	...	@@ -68,18 +68,18 @@
68	68	The ID should not be used directly to select form elements. It is dynamically generated by {{formcycle/}} and can change at any time. For the same reason, you should also not use the attribute //xi// either.
69	69	{{/warning}}
70	70
71		-The first step when you want to work with forms via JavaScript? To select a form field, so that you can access its value, change its value, or listen for changes. jQuery uses CSS selectors to locate HTML elements. The following gives a short overview some common selectors. See [[selectors >>doc:Formcycle.FormDesigner.CodingPanel.Selector]] for more information.
	71	+The first step when you want to work with forms via JavaScript? To select a form field, so that you can access its value, change its value, or listen for changes. jQuery uses CSS selectors to locate HTML elements. The following gives a short overview some common selectors. See [[selectors >>doc:Formcycle.Designer.Form.CodingPanel.Selector]] for more information.
72	72
73	73	; Select a form field by name
74		-: The most common use case is to select a form element by its name. This is the name you can view and edit in the [[base properties section>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties]] of the properties panel of the {{designer/}}. The name of a form field is written as the HTML attribute name. So to select a form field named //tfMail//, use the selector {{code language="javascript"}}$("[name='tfMail']"){{/code}}.
	74	+: The most common use case is to select a form element by its name. This is the name you can view and edit in the [[base properties section>>doc:Formcycle.Designer.Form.ElementProperties.BaseProperties]] of the properties panel of the {{designer/}}. The name of a form field is written as the HTML attribute name. So to select a form field named //tfMail//, use the selector {{code language="javascript"}}$("[name='tfMail']"){{/code}}.
75	75	; Select elements with custom attributes
76		-: You can also assign custom attributes to a form field. This is done in the [[attributes section>>doc:Formcycle.FormDesigner.ElementProperties.Attributes]] of the properties panel. They are added to the HTML element. To select all element with a certain custom data attribute: {{code language="javascript"}}$("[data-attribute='value']"){{/code}}.
	76	+: You can also assign custom attributes to a form field. This is done in the [[attributes section>>doc:Formcycle.Designer.Form.ElementProperties.Attributes]] of the properties panel. They are added to the HTML element. To select all element with a certain custom data attribute: {{code language="javascript"}}$("[data-attribute='value']"){{/code}}.
77	77	; Select the container of a form field
78	78	: All form elements are placed inside a container element. This element contains some additional elements such as the label for input fields and select elements. To select the container, use the attribute //xn//: {{code language="javascript"}}$("[xn='tfMail']"){{/code}}.
79	79	; Select form fields by their type
80	80	: Each type of form element (such as pages, text areas, buttons, or checkboxes) have got a certain CSS class. If you want to select, say, all input fields that were placed inside a fieldset, use: {{code language="javascript"}}$('.XFieldSet .XTextField'){{/code}}.
81	81	; Selecting variables
82		-: You can create [[variables>>doc:Formcycle.FormDesigner.CodingPanel.VariablesTab]] in the {{designer/}}. This add hidden input fields to the form. Each variable has got a name. To select them, use a name selector, such as {{code language="javascript"}}$("[name='tfVariable']"){{/code}}
	82	+: You can create [[variables>>doc:Formcycle.Designer.Form.CodingPanel.VariablesTab]] in the {{designer/}}. This add hidden input fields to the form. Each variable has got a name. To select them, use a name selector, such as {{code language="javascript"}}$("[name='tfVariable']"){{/code}}
83	83
84	84	== Editor ==
85	85