Interface DynamicOptions

A form element can be made repeatable by calling JQuery.dynamic on a form element. This is the configuration object that can optionally be passed to configure how many repetitions are allowed and much more.

Please note that you can also make an element repeatable by using the repeat option in the properties panel of the designer. You only need to use JavaScript in case you wish to make use of advanced features such as DynamicOptions.addButton or DynamicOptions.delButton.

For example, to make an element repeatable and allow between 1 to 6 repetition:

$("[name='fsAddress']").dynamic({
  minSize: 1, // At least 1 address
  maxSize: 6 // At most 6 addresses
});

Hierarchy

  • DynamicOptions

Index

Properties

Methods

Properties

Optional addButton

addButton: JQuery | null

Custom element to be used as the button for adding a new element, instead of the default plus icon.

The element you specify here will be removed from its position in the DOM and moved to the appropriate position below the repeated element.

Note:

  • Do not use the same element for multiple repeated elements (as that might result in the add button being shown only for one repeated element).
  • To use this option, you need to initialize the repeated element manually via JavaScript. Do not use the repeat option in the properties panel of the designer.

For example, you can add a button element to the form and style it via CSS to your liking. Assuming the button is named btnMyAwesomeAddButton and should be used for the input field tfMail, use the following code:

$('[name="tfMail"]').dynamic({
  addButton: $('[name="btnMyAwesomeAddButton"]'),
});
see

delButton

Optional delButton

delButton: JQuery | null

Custom element to be used as the button for removing a repeated element, instead of the default minus icon.

The element you specify here will be removed from its position in the DOM. Copies of that element are then added below each repeated element.

Note:

  • Do not use the same element for multiple repeated elements (as that might result in the delete button being shown only for one repeated element).
  • To use this option, you need to initialize the repeated element manually via JavaScript. Do not use the repeat option in the properties panel of the designer.

For example, you can add a button element to the form and style it via CSS to your liking. Assuming the button is named btnMyAwesomeDelButton and should be used for the input field tfMail, use the following code:

$('[name="tfMail"]').dynamic({
  delButton: $('[name="btnMyAwesomeDelButton"]'),
});
see

addButton

Optional hideButtons

hideButtons: boolean | ("add" | "delete")[]

This option lets you hide the add and remove buttons, in case the user should not be able to add or remove elements dynamically. The allowed values for this option are:

  • false: All buttons are shown and can be used (the default)
  • true: Both the add and the remove buttons are hidden.
  • An array specifying which buttons should be hidden. Either [] (no buttons are hidden), ["add"], ["delete"] or ["add", "delete"].

Optional maxSize

maxSize: number

The maximum number of allowed repetitions. Default: 10.

Optional minSize

minSize: number

The minimum number of allowed repetitions. Default: 1.

Optional trigger

trigger: JQuery | null

If specified, the value of this element is used as the number of dynamically created repeated elements.

Whenever the element's numerical value changes, elements are added or removed to reflect the new value.

Note:

  • To use this option, you need to initialize the repeated element manually via JavaScript. Do not use the repeat option in the properties panel of the designer.

For example, consider a repeated container with the details of a child, such as their name, birth of place and sex. If you set the trigger to an input element tfNumberOfChildren, there are always as many copies of the child details container as entered number of children. Assuming the container is named divChild, use the following code:

$('[name="divChild"]').dynamic({
  trigger: $('[name="tfNumberOfChildren"]'),
});

Methods

Optional afterAdd

  • afterAdd(this: undefined, event: Event, item: JQuery): void

  • Optional callback function that is invoked after a new element repetition was added.

    Parameters

    • this: undefined
    • event: Event

      Event which triggered the addition of a new item.

    • item: JQuery

      The element that was added.

    Returns void

Optional afterDel

  • afterDel(this: undefined, event: Event, item: JQuery): void

  • Optional callback function that is invoked after an element repetition was removed.

    Note that this callback lets you to access the element that was removed. As it is already detached from the DOM, only certain properties such as its value and its children can still be accessed. Certain actions such as checking the element's visibility are not available anymore.

    Parameters

    • this: undefined
    • event: Event

      Event which triggered the removal.

    • item: JQuery

      The element that was removed.

    Returns void

Optional beforeAdd

  • beforeAdd(this: undefined, event: Event, item: JQuery): boolean | void

  • Optional callback function that is invoked before a new element repetition is about to be added.

    Note that this callback lets you to access the element before it was added. As it is not yet detached to the DOM, only certain properties such as its value and its children can be accessed. Certain actions such as checking the element's visibility are not yet available.

    Parameters

    • this: undefined
    • event: Event

      Event which triggered the addition of a new item.

    • item: JQuery

      The element that is about to be added.

    Returns boolean | void

    If false, the element will not be added. Otherwise, the element is added normally.

Optional beforeDel

  • beforeDel(this: undefined, event: Event, item: JQuery): boolean | void

  • Optional callback function that is invoked before an element repetition is about to be removed.

    Parameters

    • this: undefined
    • event: Event

      Event which triggered the removal.

    • item: JQuery

      The item that is about to be removed.

    Returns boolean | void

    If false, the element will not be deleted. Otherwise the item is deleted.

Optional changeRowSize

  • changeRowSize(this: undefined, size: number, item: JQuery, added: boolean): void

  • A function that is invoked each time an element repetition is added or removed.

    Parameters

    • this: undefined
    • size: number

      The current count of dynamically created items.

    • item: JQuery

      The item that was added or removed.

    • added: boolean

      true if the item was added, false if it was removed.

    Returns void