Viele Funktionalitäten im Formular sind direkt über die grafische Oberfläche des Xima® Formcycle-Designers einstellbar. Etwa können Felder als Mussfelder markiert werden oder in Abhängigkeit einer Bedingung ein- oder ausgeblendet werden. Bei komplexen Formularen kann es vorkommen, dass es spezielle Anforderungen gibt, die eine gesonderte Programmierung erfordern. Im JavaScript-Bereich ist es möglich, eigene Logik für das Formular zu erstellen. Hier wird, wie der Name es sagt, die Programmiersprache JavaScript verwendet.

JavaScript funktioniert in allen modernen Browsern. Es ist allerdings zu beachten, dass die Sprache JavaScript sich aktiv in Entwicklung befindet und es daher mehrere Versionen gibt. Bei der Programmierung ist unbedingt darauf zu achten, welche Browser und welche Versionen dieser Browser unterstützt werden sollen. 

• Can I Use... Support tables for HTML5, CSS3, etc. Durchsuchbare Liste für die Unterstützung verschiedenster Web-Technologien in den einzelnen Browsern.
• Mozilla JavaScript Reference Dokumentation von Mozilla zu vielen JavaScript-Funktionalitäten. Für viele Funktionalitäten findet sich eine Auflistung der Unterstützung in den verschiedenen Browsern. Beispielsweise findet man hier zur Funktion String.prototype.startsWith (prüfen, ob eine Zeichenkette ein bestimmtest Präfix hat), dass diese Funktion von allen Browser außer dem Internet Explorer unterstützt werde.

Speziell ist mit Vorsicht vorzugehen, falls der Browser Internet Explorer unterstützt werden soll. Dieser wird nicht mehr weiterentwickelt und unterstützt viele moderne Funktionen nicht.

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 in Unterschiede zwischen verschiedenen Browsern abstrahiert:

• 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:

• http://www.jquery-board.dehttp://www.jquery-board.de
• http://matthiasschuetz.com/javascript-framework-matrix/de/jquery
• http://www.dpunkt.de/jquery_html/http://www.dpunkt.de/jquery_html

Elementselektierung

Der erste Schritt beim Arbeiten mit Formularen besteht darin, mittels JavaScript auf ein Formularelement zuzugreifen. jQuery nutzt CSS-Selektoren zur Selektierung von HTML-Elementen. Im Folgenden sei ein kurzer Überblick gegeben, wie sich Formularelemente von Xima® Formcycle mittels jQuery selektieren lassen. Weitere Information sind im Abschnitt Selektoren zu finden.

Elemente per Name selektieren

Zum Auswählen eines Formularfeld wird sein Name genutzt. Also der Name, der im Xima® Formcycle-Designer einem Formularelement unter Grundeigenschaften gegeben wird. Dieser Name wird auch im HTML dem Element als Wert des Attributs name mitgegeben. Um also ein Textfeld mit dem Namen tfMail zu selektieren, wird mittels jQuery selektiert: $("[name='tfName']").

Elemente mit nuzterdefinierten Attributen selektieren

Unter Attribute lassen sich im Xima® Formcycle-Designer einem Element nutzerspezifische HTML-Attribute vergeben. Auf diese wird mittels Attributselektoren zugegriffen: $("[data-attribute='value']"). Da diese Selektoren allerdings langsam sein können, sollten diese sparsam eingesetzt werden.

Container-Element selektieren

Einige Formularelemente bestehen aus dem eigentlichen HTML-Element und einem HTML-Element für das Label. Um das Container-Element zu selektieren, kann das Attribut xn verwendet werden. $("[xn='tf1']").

Formularfeldtypen selektieren

Jede Art von Formularelement (z.B. Seite, Textarea, Schaltfläche, Checkbox) verfügt über eine bestimmte CSS-Klasse. Falls man etwa alle Eingabefelder selektieren möchte, die sich in einem Fieldset befinden, kann man folgendes schreiben: $('.XFieldSet .XTextField').

ID-Selektoren

Es sollte nicht direkt die id zum Selektieren von Elementen verwendet werden. Diese wird von Xima® Formcycle dynamisch erzeugt wird und kann sich jederzeit ändern. Aus diesem Grund sollte auch nicht das Attribut xi verwendet werden, auch hier handelt es sich um eine interne ID von Xima® Formcycle.

Variablen selektieren

Werden Variablen erstellt, wird im Formular ein verstecktes Eingabefeld (input) erzeugt. Auch auf dieses kann mit dem Attribut name zugegriffen werden: $("[name='tfVariable']")

Editor