{"result":{"depiction_url":null,"edges":{"relation":{"objects":[{"created":"2020-05-30T05:48:19Z","object_id":{"id":1539,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_wires","title":"Wires","uri":"https:\/\/zotonic.com\/id\/1539"},"seq":1000000}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}}},"id":1584,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1584"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_frontend_formupdating","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1584\/updating-form-field-from-a-dialog","x-default":"https:\/\/zotonic.com\/cookbook\/1584\/updating-form-field-from-a-dialog"},"preview_url":null,"resource":{"body":"
\n \n
\n\n

Ever wanted to update a form field from a dialog, possibly giving the\nuser some list to choose from? Here’s how to do it.<\/p>\n

\n

Why<\/h2>\n

Some interactions benefit from presenting a dialog for input. This\nguide explains how to take input in a dialog and have it apply to a\nform input value.<\/p>\n<\/div>\n

\n

Assumptions<\/h2>\n

Readers are expected to understand DOM IDs for uniquely identfying\nform inputs and also understand advanced usage of Zotonic Template\ntags.<\/p>\n<\/div>\n

\n

How<\/h2>\n

To be able to update a form field, you need to pass the id of the\nelement you want to update to the dialog. It may look something like:<\/p>\n

<\/span>{%<\/span> button<\/span> text<\/span>=<\/span>"Update field dialog"<\/span>\n        action<\/span>={<\/span>dialog_open<\/span>\n                title<\/span>=<\/span>"Update form field value"<\/span>\n                template<\/span>=<\/span>"my_dialog.tpl"<\/span>\n                target_id<\/span>=<\/span>"input_element_id"<\/span>}<\/span>\n%}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
Then create your dialog template, my_dialog.tpl in this example, and wire a set_value action to update the input form element:<\/p>\n
<\/span><a id="my_anchor" href="javascript:void(0)" href="javascript:void(0)">Click here to update form value<\/a><\/span>\n{%<\/span> wire<\/span> id<\/span>=<\/span>"my_anchor"<\/span>\n        type<\/span>=<\/span>"click"<\/span>\n        action<\/span>={<\/span>set_value<\/span> target<\/span>=<\/span>target_id<\/span> value<\/span>=<\/span>"My new value"<\/span>}<\/span>\n        action<\/span>={<\/span>dialog_close<\/span>}<\/span>\n%}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n