formcycle 8.3.6 - JavaScript for forms
    Preparing search index...

    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 and 6 repetitions:

    $("[data-name='fsAddress']").dynamic({
      minSize: 1, // At least 1 address
      maxSize: 6 // At most 6 addresses
    });
    interface DynamicOptions {
        addButton?: JQuery<HTMLElement>;
        delButton?: JQuery<HTMLElement>;
        hideButtons?: boolean | ("add" | "delete")[];
        maxSize?: number;
        minSize?: number;
        trigger?: JQuery<HTMLElement>;
        afterAdd(this: undefined, event: TriggeredEvent, item: JQuery): void;
        afterDel(this: undefined, event: TriggeredEvent, item: JQuery): void;
        beforeAdd(
            this: undefined,
            event: TriggeredEvent,
            item: JQuery,
        ): boolean | void;
        beforeDel(
            this: undefined,
            event: TriggeredEvent,
            item: JQuery,
        ): boolean | void;
        changeRowSize(
            this: undefined,
            size: number,
            item: JQuery,
            added: boolean,
        ): void;
    }
    Index

    Properties

    addButton? delButton? hideButtons? maxSize? minSize? trigger?

    Methods

    afterAdd? afterDel? beforeAdd? beforeDel? changeRowSize?

    Properties

    addButton?: JQuery<HTMLElement>

    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"]'),
    });

    delButton

    delButton?: JQuery<HTMLElement>

    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"]'),
    });

    addButton

    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"].
    maxSize?: number

    The maximum number of allowed repetitions. Default: 10.

    minSize?: number

    The minimum number of allowed repetitions. Default: 1.

    trigger?: JQuery<HTMLElement>

    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 callback function that is invoked after a new element repetition was added.

      Parameters

      • this: undefined
      • event: TriggeredEvent

        Event which triggered the addition of a new item.

      • item: JQuery

        The element that was added.

      Returns void

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

      Note that this callback lets you 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: TriggeredEvent

        Event which triggered the removal.

      • item: JQuery

        The element that was removed.

      Returns void

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

      Note that this callback lets you 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: TriggeredEvent

        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 callback function that is invoked before an element repetition is about to be removed.

      Parameters

      • this: undefined
      • event: TriggeredEvent

        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.

    • 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

    Settings

    Member Visibility

    On This Page

    Properties
    Methods