Repetition

WF2 introduces a very convinient method to create repeating blocks.

This form can have an arbitrary number of fields, just click [Add Item] to add one more

The initial HTML look like this:

<form>
    <div id="row1" repeat="template">
        <input type="text" name="product.[template1]" value=""><button type=remove>Remove</button>
    </div>
    <button type=add template=row1>Add Item</button>
</form>

The attribute repeat="template" declares that the element is an template which can be repeated.

The new button types add and remove is used for adding and removing instances of the template.

The template may contain several fields. Here is a slightly more complex example:

Submission format

How does this look on the server side?

Moving blocks

If the order of the items is important, two additional button types can be used for moving up and down:

The HTML is: <button type=move-up>Up</button> <button type=move-down>Down</button>

Repeat-start

By default, one instance based on the template is inserted in the document initially. This can be overridden by setting the repeat-start attribute to a number. (If the number is 0, no blocks is inserted initially). The attributes repeat-min and repeat-max defines the minimum ans maximum allowed blocks.

This expample has repeat-start=3, repeat-min=2 and repeat-max=5 :

Nested repeat

You can have nested repetition-elements: