Updating form field from a dialog

Ever wanted to update a form field from a dialog, possibly giving the user some list to choose from? Here’s how to do it.


Some interactions benefit from presenting a dialog for input. This guide explains how to take input in a dialog and have it apply to a form input value.


Readers are expected to understand DOM IDs for uniquely identfying form inputs and also understand advanced usage of Zotonic Template tags.


To be able to update a form field, you need to pass the id of the element you want to update to the dialog. It may look something like:

{% button text="Update field dialog"
                title="Update form field value"

Then create your dialog template, my_dialog.tpl in this example, and wire a set_value action to update the input form element:

<a id="my_anchor" href="javascript:void(0)" href="javascript:void(0)">Click here to update form value</a>
{% wire id="my_anchor"
        action={set_value target=target_id value="My new value"}

If you include a template like the one above into your dialog template many times (i.e. from a for loop), then having fixed ids are no good. To prefix the id with a unique value (per invocation of the template) prefix the id with a #-sign. so the a-tag becomes <a id={{#my_anchor}}… and the wire becomes wire id=#my_anchor… which will expand to something like "ubifgt-my_anchor".