CSS selectors

Last modified by superadmin on 24.01.2017

The CSS tab allows you to add your own custom CSS to style the form. Form elements are accessed via CSS selectors. See the help pages on the CSS tab for more information.

Additionally, the JavaScript library jQuery can be used for custom scripts in the script tab. jQuery uses CSS selectors with some additions. See the help pages on the script tab for further information on jQuery.

Xima® Formcycle adds certain classes and attributes to the rendered HTML events that can be used with CSS selectors. See the help pages on selecting elements for a list of selectors.

Selecting elements by name

Often you want to select a form element by its name, that has been assigned to it in the Xima® Formcycle Designer. Use the following the selector:

$('[name=element]') // via jQuery in the script tab
[name=element] { /* via CSS in the CSS tab */
 color: #DDD;
}
  • name
    Select all elements with the attribute name set.

  • element
    Select all elements with this value for the attribute name.

The name can be changed in the basic properties panel of the Xima® Formcycle Designer.

Some form elements such as input fields, upload fields, or text areas consist of two HTML elements, ie. the main element and a label element for the form element. To select both elements together, use the attribute xn (=Xima name) instead.

$('[xn=element]') // via jQuery in the script tab
[xn=element] { /* via CSS in the CSS tab */
 font-weight: 600;
}
  • xn
    Select all elements with the attribute xn set.

  • element
    Select all elements with this value for the attribute xn.

More attribute selectors

// All input fields of type "text"
$('input[type=text]')

// All links linking to a pdf file, ie. with the attribute "href" ending on ".pdf".
$('a[href$=".pdf"]')

// All images with the "alt" attribute set.
$('img[alt]')

When you assign custom attributes to an element, you can select elements with that attribute with $('[myAttribute="myValue"]').

Working with selected elements

Once elements have been selected, you can read their contents or modify them via jQuery and additional functions provided by Xima® Formcycle

// Hide all input fields
$('input[type=text]').visible(false)

// Make the element with the name zipCode a required form field.
$('[name=zipCode').setRequired(true)
Tags:
Created by superadmin on 28.09.2015
Translated into en by superadmin on 18.05.2016
  
Copyright 2000-2016