JavaScript tab

Content [ Hide ]

JavaScript
Element selection
ScriptTab

Create your own business logic in the JavaScript tab. The figure shows an email input field. It only allows valid email addresses. A JavaScript function is added that adds an additional check and only allows email addresses of certain hosts. Another JavaScript function changes the number format of an input field for a currency: always show the current sign (EUR) and exactly two decimal digits.

JavaScript

Any JavaScript you write in the JavaScript tab, is loaded automatically. It get executed once the form has finished loading (document.ready. That is, when all form elements are available and you can access them.

The same does not apply to JavaScript you uploaded as a client or form resource. It also get loaded automatically, but is run as soon as it finished loading. When necessary, wait manually until the form has finished loading:

$(function(){
/* code goes here */
});

You can configure many features directly with the user interface of the Xima® Formcycle Designer. This includes marking form fields are required fields, hiding or showing form fields depending on certain conditions and many more options. Still, you may find it necessary at times to write you own custom business logic for your forms. This is what the JavaScript tab allows you to do. As the name implies, this tab lets you write your own JavaScript code. It gets loaded automatically when the form is opened.

JavaScript is supported by all modern browsers. But please note that JavaScript is an active language. New versions of the language are constantly released every few year. Not all browsers may support the latest version yet. You should always check which browsers you are required to support or are willing to support, and not use any unsupported features:

Can I Use... Support tables for HTML5, CSS3, etc. Large, searchable database showing if and how well browsers support different various features of JavaScript, HTML5 and CSS3.
Mozilla JavaScript ReferenceJavaScript documentation maintained by Mozilla. Not only does it a good job of explaining JavaScript APIs, it also contains tables detailing which browsers support a particular feature. For example, here you can find the documentation for the function String.prototype.startsWith, which checks whether a string starts with a certain prefix. The page tells us that this function is supported by all browsers except Internet Explorer (all versions).

Special care is required when you would like to support the browser Internet Explorer. This browser is not in active development any longer and does not support many modern features. This includes, but is not limited to:

Fetch-API, a native method similar to jQuery.ajax
Promise-API, letting you handler asynchronous processes more easily, such as network requests
New syntax such as arrow function, async functions, object destructuring or classes
etc.

In Formularen von Xima® Formcycle wird weiterhin die JavaScript-Bibliothek jQuery verwendet. Dies ist eine bewährte Bibliothek, welche neben einigen Hilfsfunktionen die Arbeit mit HTML (dem DOM) vereinfacht und zudem Unterschiede zwischen verschiedenen Browsern abstrahiert. Wird eine Methode von jQuery verwendet, funktioniert diese Methode in allen unterstützten Browsern gleich. In Formularen wird die derzeit neuste Version jQuery 3 verwendet:

Offizielle Webseite von jQuery: http://jquery.com/http://jquery.com
Offizielle Dokumentation von jQuery: http://api.jquery.com/http://api.jquery.com

Hilfeseiten und Tutorials zu jQuery:

Element selection

in the next section to get an overview of "select elements using jQuery".

The name of a form element given in basic features of the Xima® Formcycle Designer, is given the value of the attribute name in the DOM. So in order to select a text box with the name tf1, write: $('[name="tf1"]').
Under attributes, an element can be assigned user-specific HTML attributes in the Xima® Formcycle Designer. This can be accessed as usual: $('[attribute=value]').
Some form elements consist of the actual HTML element (e.g. input field) and an HTML element (e.g. span) for the label. In order to select both the attribute xn can be used. $('[xn="tf1"]').
Each type of form element (e.g. page, text area, button, check box, ...) has a certain CSS class. Should one wish to select all the input fields contained in a fieldset , one can write: $('.XFieldSet .XTextField').
The id should not be used directly for elements selection since it is generated dynamically by Xima® Formcycle and can be changed at any time. For this reason, the attribute xi should not be used either as it is an internal ID of Xima® Formcycle.
Should variables in the Xima® Formcycle Designer be assigned, a hidden inputfield is generated which can also be accessed by the name attribute. See variables area.

Tags:

JavaScript tab

JavaScript

Element selection

Navigation