formio / formio.js

JavaScript powered Forms with JSON Form Builder

Home Page:https://formio.github.io/formio.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Interaction of 2 select fields

harthorst opened this issue · comments

Hi.

I have 2 Select Fields, e.g. Name and Surname. Both are using URL as data source type, which returns a structure like this:

[
{'surname': 'Duck', 'name': 'Duffy'},
{'surname': 'Duck': 'name': 'Darkwing'},
...
]

When I type something into Name or Surname, I want to get a dropdown list like:

  • Duffy Duck
  • Darkwing Duck

I can do that by setting the item template.

When I select a row in the dropdown list I want the form to set the values in both fields. E.g. Surname should by "Duck" and Name "Duffy".

How can I achieve this? I tried to hook into the onchange event of Surname but I can't just take the selected value of Surname and search for the right Name since "Duck" occurs multiple times in searchDownloadedResources.

My current solution is much simpler than I thought. Reading the documentation helps:

{ "label": "Name", "tableView": true, "dataSrc": "url", "data": { "url": "https://www.duck-mania.example.com", }, "template": "<span>{{ item.name }} {{ item.surname }}</span>", "validate": { "select": false }, "key": "name", "logic": [ { "name": "onChange", "trigger": { "type": "event", "event": "change" }, "actions": [ { "name": "onChange", "type": "customAction", "customAction": "data.surname=value.surname\n\nfield = instance.parent.components[1]\nfield.redraw()\n\n// set value correctly\nvalue=value.properties.name" } ] } ], "type": "select", ... }