Cookbook

Update a form field with an action

Set a visible value without duplicate element IDs.

On a page with the standard Zotonic browser scripts:

<label for="{{ #choice }}">{_ Chosen value _}</label>
<input id="{{ #choice }}" name="choice" value="">
{% button text="Choose garden" action={set_value target=#choice value="Garden"} %}

Click the button and expect “Garden” in the field. Generated # IDs keep separate instances of the template distinct. If the chooser is inside a dialog, pass the target ID into that dialog template and add action={dialog_close} after setting the value.

This changes browser state only. Validate the value again in the server-side form handler before saving. A visitor can change an input regardless of how the chooser populated it.

Further reading

Related documentation

Actions

form_reset

Resets the target form to its initial state.

Actions

validation_error

Render a validation error on the target. Text is given in the text argument.

Actions

submit

Submits the enclosing form, a specifically targeted form or the closest form to an element.

Actions

reset

Resets the enclosing form, a specifically targeted form or the closest form to an element.

Developer guide

Handle a browser event with a wire

Use scomp#wire to connect a browser event to an action or a server postback. Give the target element a stable ID within the rendered page.

Cookbook

Add a contact form

Choose a survey form or implement a validated server-side mail handler.