Repeating elements

Content [ Hide ]

Selection of a repeating element

If the Repeat setting is made for an element, then the name selector for the corresponding input elements also changes. By default, this has been data-name since V7. For example, for input field tfName:

$('[data-name="tfName"]')

The attribute data-name is still existing, but a serial index is appended and the newly generated name would be for the lines tfName_dyn_div1_0, fName_dyn_div1_1, etc. In this concrete example, the input field tfName is inside a container div1. The actual name is now inside the attribute data-org-name. This would be the general selector:

$('[data-org-name="tfName"]').on('change', function() {
    // Your code follows here...
});

Alternatively, the element's own CSS class can be used, if the option under Form > Advanced > Add name as CSS class has been activated:

$('.tfName').on('change', function() {
    // Your code follows here...
});

When the selector is called intitally, only the first line would be selected and the corresponding functions appended. Because only the first line is available at the time of the call.

Apply events and functions of an element for following lines

As soon as a new row is added, the previously stored actions, e.g. reaction to a change, are no longer defined and must now be added for the following rows. This is possible with the event addRow:

$('FORM.xm-form').on('addRow', doSomething);

function doSomething(event, data) {
   var row = data.container;

    $('[data-org-name="tfName"]', row).on('change', function() {
       // Your code follows here...
    });
}

doSomething(null, {});

As soon as a row is added, the according event is attached to the new row. To ensure that this is also applied to the first row (if min. repetition is 1), the according function has to be executed again individually. In this case, no row element must be passed.