{formsaver:container:label}

Description

Adds a small panel of clickable buttons that remember what a visitor previously typed into a form, so they can refill it with one click. It must sit inside a form. On each submit the browser stores the serialized form values in the visitor browser (localStorage), keeping up to 5 distinct entries; each stored entry shows as a button labelled with the value of the form first input (truncated to 16 characters). Clicking a button resets the form and refills it from that stored entry. With no parameters it saves the whole enclosing form; pass a CSS selector as the first parameter to save only that subform. The second parameter is an optional label shown before the buttons (HTML allowed). The command emits an empty container div and loads the form-saver JavaScript; the buttons appear only once at least one entry has been saved, and only in the browser - there is no server-side output to test. Requires jQuery (loaded automatically).

Parameters

container optional

CSS selector for the part of the form to save and restore (for example .my-subform or #search-box). Leave empty to save the whole form that contains the formsaver.

label optional

Text shown before the saved-search buttons once at least one entry exists. HTML is allowed (for example Fill by). Leave empty for no label.

Examples

virtual{formsaver}

Expected(an empty div with class aa-form-saver and an id like aa-fs-Xk3a2; the id is a hash of the page URL, and the recall buttons appear in the browser after the first submit)

Actual

With no parameters, formsaver remembers the whole form it sits in. Place it anywhere inside the form element. Output is a single empty container div; the recall buttons are drawn by JavaScript in the browser after the visitor submits the form at least once.

virtual{formsaver:.search-box}

Expected(an empty container div bound to the .search-box subform; recall buttons are added in the browser)

Actual

Pass a CSS selector to remember only that part of the form. Here only the inputs inside the element matching .search-box are stored and restored, not the rest of the form.

virtual{formsaver::Recent searches}

Expected(an empty container div; once an entry is saved the browser prefixes the buttons with the text Recent searches)

Actual

The second parameter is a label shown before the saved entries. Note the double colon - the first (container) parameter is left empty so the whole form is saved, and Recent searches is the label. HTML is allowed in the label.

virtual{formsaver:#filters:Reuse a filter}

Expected(an empty container div bound to #filters, labelled Reuse a filter once an entry exists)

Actual

Both parameters at once: save only the subform matching #filters, and label its recall buttons Reuse a filter. This is the typical pattern on a search or filter panel.

← All expressions