A form element can be made repeatable by calling $(formElement).dynamic(). This is the configuration object that may be passed optionally to configure how many repetitions are allowed and much more.

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

Hierarchy

  • DynamicOptions

Index

Properties

Optional addButton

addButton: JQuery

Element to be used as the button for adding elements, in addition the plus and minus icons. None by default.

Optional delButton

delButton: JQuery

Element to be used as the button for removing elements, in addition the plus and minus icon. None by default.

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 repetitions. Default: 10.

Optional minSize

minSize: number

The minimum number of repetitions. Default: 1.

Optional trigger

trigger: JQuery

If given, the value of this element is used as the number of dynamically created items. Whenever the given element's value changes, dynamically created items are added or removed to reflect the new value.

For example, consider a dynamic container with the details for a child. If you set the trigger to an input element number of children, there are always as many copies of the child details container as the number of children entered.

Methods

Optional afterAdd

  • afterAdd(this: undefined, event: Event, item: JQuery): void
  • Optional callback function called after an element 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 called after an element 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 visiblity 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 called before an element 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 visiblity 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

    Iff false, the element will not be added.

Optional beforeDel

  • beforeDel(this: undefined, event: Event, item: JQuery): boolean | void
  • Optional callback function called before an element 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

    Iff false, the element will not be deleted.

Optional changeRowSize

  • changeRowSize(this: undefined, size: number, item: JQuery, added: boolean): void
  • A function that is called every time an item 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 iff the item was added, false iff it was removed.

    Returns void