# Multiple input elements (form) into one message

**URL:** <https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [1 March 2024 15:58 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062 "2024-03-01T15:58:53Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)\
**Post date:** [1 March 2024 15:58 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/1 "2024-03-01T15:58:53Z")

</div>

Hi all,

We are in the process of building a new user interface where we'd like to use more of the custom ui elements (ui-slider, ui-text-input, ui-dropdown, etc.) for user input. Currently, we are using a join node to create a single message from all the inputs when the user presses a Submit button (which sends a msg.complete to the join node).  
However, this is not without it's problems. If input data is not cleared after a Submit, the input field retains the data (visually) but that information is not sent to the join node. This can of course be corrected by sending the output info back to the input nodes. And having a Clear button that sends empty payloads to all input nodes.  
So while we do have something that works, this is all kind of elaborate to set up. Especially with big forms. What I'm asking here if there is a simpler way to go about achieving this.

What would be the "correct" or most accepted way to build an input form using individual input nodes, resulting in a single message containing all correct (i.e. on-screen) input values after a Submit button press?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 March 2024 17:07 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/2 "2024-03-01T17:07:01Z")

</div>

I'd got for a pattern of utilising `flow.` context variables. So, each element in your "form" has a change node after it which sets `flow.<something>`.

Then when you click your submit button, you retrieve the relevant values from `flow.` context variables, form a single object, and clear the `flow. for the next submission`.

This does however breakdown if you're having multiple people submit a form at the same time, but you could utilise the `_client.socketId` and map accordingly here instead, or, if on FlowFuse, use the `msg._client.user` object.

---

<div class="post-metadata">

**Author:** ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)\
**Post date:** [1 March 2024 19:18 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/3 "2024-03-01T19:18:00Z")

</div>

Thanks Joe!  
I'll try it out and see if that works better.

---

<div class="post-metadata">

**Author:** ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)\
**Post date:** [20 March 2024 14:14 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/4 "2024-03-20T14:14:30Z")

</div>

Hi Joe,

The method using flow. works better, but I'm having trouble setting a msg variable as a key for the flow. object. Could you please give an example on how to set a flow. variable using msg.\_client.user as a key in a change node?

Thanks!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 March 2024 15:15 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/5 "2024-03-20T15:15:07Z")

</div>

> [@SynoUser-NL](#):
>
> how to set a flow. variable using msg.\_client.user as a key

So long as it is a sub property, you can use square bracket notation.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f7ce306be5ecd396fde96e826bb87e670fcc4ec0.png)

Top one is OK, second one is not.

Top version is better anyhow as you only have one object to maintain instead of hundreds\* of top level properties.

---

<div class="post-metadata">

**Author:** ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)\
**Post date:** [20 March 2024 20:26 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/6 "2024-03-20T20:26:55Z")

</div>

Thank you Steve!  
But I'm clearly doing something wrong.

I am setting flow.object[msg.\_client.user.username].ticket to the value of msg.payload in a Change node.  
In a subsequent Change node I am setting setting msg.data.ticket (after first creating a msg.data object with JSON) to the value of flow.{username}.ticket (where I've hard-coded the username for testing purposes).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d81b215144b2ba1ea95d8a20a52178ba58e01214.png)

The msg.data.ticket property is not being set and I don't see why not. Any thoughts?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 March 2024 13:45 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/7 "2024-03-21T13:45:52Z")

</div>

Here's a functioning `flow.json`:

```json
[
    {
        "id": "91b2fc6183819936",
        "type": "ui-radio-group",
        "z": "da7bf783aac88231",
        "group": "07e6fb7315e56445",
        "name": "Radio Group",
        "label": "Select Option:",
        "order": 2,
        "width": 0,
        "height": 0,
        "columns": 1,
        "passthru": false,
        "options": [
            {
                "label": "Option A",
                "value": "a",
                "type": "str"
            },
            {
                "label": "Option B",
                "value": "b",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "radio-group",
        "topicType": "str",
        "className": "",
        "x": 190,
        "y": 140,
        "wires": [
            [
                "a61aac88d51a335e"
            ]
        ]
    },
    {
        "id": "69d760689847ef18",
        "type": "ui-text-input",
        "z": "da7bf783aac88231",
        "group": "07e6fb7315e56445",
        "name": "",
        "label": "text",
        "order": 1,
        "width": 0,
        "height": 0,
        "topic": "text-input",
        "topicType": "str",
        "mode": "text",
        "delay": 300,
        "passthru": true,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "x": 210,
        "y": 100,
        "wires": [
            [
                "a61aac88d51a335e"
            ]
        ]
    },
    {
        "id": "43436045a697228e",
        "type": "ui-button",
        "z": "da7bf783aac88231",
        "group": "07e6fb7315e56445",
        "name": "",
        "label": "Submit",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 200,
        "y": 180,
        "wires": [
            [
                "0082a28d21feeddc"
            ]
        ]
    },
    {
        "id": "0082a28d21feeddc",
        "type": "change",
        "z": "da7bf783aac88231",
        "name": "Build Single Form Object",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "formSubmissions[msg._client.user.username]",
                "tot": "flow"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 390,
        "y": 180,
        "wires": [
            [
                "f7aec72923931f45"
            ]
        ]
    },
    {
        "id": "a61aac88d51a335e",
        "type": "change",
        "z": "da7bf783aac88231",
        "name": "Store Temporary Context",
        "rules": [
            {
                "t": "set",
                "p": "formSubmissions[msg._client.user.username][msg.topic]",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "f7aec72923931f45",
        "type": "ui-template",
        "z": "da7bf783aac88231",
        "group": "07e6fb7315e56445",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <h3>Form Submission:</h3>\n <pre>{{ msg?.payload }}</pre>\n <label>Submitted by {{ msg._client?.user?.username }}</label>\n</template>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 580,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "07e6fb7315e56445",
        "type": "ui-group",
        "name": "Form",
        "page": "3bceecc44f91d26b",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "3bceecc44f91d26b",
        "type": "ui-page",
        "name": "Custom Form Submission",
        "ui": "c851adb9b2a29c9e",
        "path": "/form-submission",
        "icon": "home",
        "layout": "grid",
        "theme": "35ee7753b5b3599b",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c851adb9b2a29c9e",
        "type": "ui-base",
        "name": "Multi User Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-template"
        ]
    },
    {
        "id": "35ee7753b5b3599b",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#16234b",
            "primary": "#1d44b9",
            "bgPage": "#ecf2f8",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]

```

It uses the `msg.topic` on the different inputs to define the `type`, then in the `change` node, uses @Steve-Mcl's pattern by which to save this to a `flow` variable with `formSubmissions[msg._client.user.username][msg.topic]` - building out a single object _per_ user.

Then, on submission, retrieves that form for the user

 ![Screenshot 2024-03-21 at 13.45.11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/786ee5bf7955b309a8f60a2eedb36e3a8904d727.png)

You could also then clear the `flow` variable and inputs on submission too for completeness, but I've not done that here.

The flow ends up building:

 ![Screenshot 2024-03-21 at 13.57.40](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d41a107569f7ff889a95abdee42a1c2b139e7834.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 March 2024 15:24 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/9 "2024-03-21T15:24:39Z")

</div>

Just to say this could also be done with an Auto join and msg.parts.  
e.g.

```auto
[{"id":"91b2fc6183819936","type":"ui-radio-group","z":"d1395164b4eec73e","group":"07e6fb7315e56445","name":"Radio Group","label":"Select Option:","order":2,"width":0,"height":0,"columns":1,"passthru":false,"options":[{"label":"Option A","value":"a","type":"str"},{"label":"Option B","value":"b","type":"str"}],"payload":"","topic":"radio_group","topicType":"str","className":"","x":470,"y":5840,"wires":[["73b65db425be8fa3"]]},{"id":"69d760689847ef18","type":"ui-text-input","z":"d1395164b4eec73e","group":"07e6fb7315e56445","name":"","label":"text","order":1,"width":0,"height":0,"topic":"text_input","topicType":"str","mode":"text","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","x":470,"y":5800,"wires":[["6e97049c966c8c09"]]},{"id":"43436045a697228e","type":"ui-button","z":"d1395164b4eec73e","group":"07e6fb7315e56445","name":"","label":"Submit","order":3,"width":0,"height":0,"passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"submit","payloadType":"str","topic":"submit","topicType":"str","x":460,"y":5880,"wires":[["65534118a1626935"]]},{"id":"6238d86895290052","type":"switch","z":"d1395164b4eec73e","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"submit","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":910,"y":5840,"wires":[["f7aec72923931f45"]]},{"id":"6ec4fe70f4c5f29b","type":"debug","z":"d1395164b4eec73e","name":"debug 2485","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":850,"y":5940,"wires":[]},{"id":"6e97049c966c8c09","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"parts","pt":"msg","to":"{\"key\": \"text_input\",\t\"count\": 3,\t\"index\": 0,\t\"type\": \"object\",\t\"id\": $$._client.socketId\t}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":5800,"wires":[["442b2978bcb47527","6ec4fe70f4c5f29b"]]},{"id":"73b65db425be8fa3","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"parts","pt":"msg","to":"{\"key\": \"radio_input\",\t\"count\": 3,\t\"index\": 1,\t\"type\": \"object\",\t\"id\": $$._client.socketId\t}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":5840,"wires":[["442b2978bcb47527","6ec4fe70f4c5f29b"]]},{"id":"65534118a1626935","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"parts","pt":"msg","to":"{\"key\": \"submit\",\t\"count\": 3,\t\"index\": 2,\t\"type\": \"object\",\t\"id\": $$._client.socketId\t}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":5880,"wires":[["442b2978bcb47527","6ec4fe70f4c5f29b"]]},{"id":"442b2978bcb47527","type":"join","z":"d1395164b4eec73e","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":"false","timeout":"","count":"","reduceRight":false,"x":810,"y":5800,"wires":[["6238d86895290052"]]},{"id":"f7aec72923931f45","type":"ui-template","z":"d1395164b4eec73e","group":"07e6fb7315e56445","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <h3>Form Submission:</h3>\n <pre>{{ msg?.payload }}</pre>\n <label>Submitted by {{ msg?._client?.socketId }}</label>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":5880,"wires":[["6ec4fe70f4c5f29b"]]},{"id":"07e6fb7315e56445","type":"ui-group","name":"Form","page":"3bceecc44f91d26b","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"3bceecc44f91d26b","type":"ui-page","name":"Custom Form Submission","ui":"1805777f90e92057","path":"/form-submission","icon":"home","layout":"grid","theme":"35ee7753b5b3599b","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"35ee7753b5b3599b","type":"ui-theme","name":"Theme Name","colors":{"surface":"#16234b","primary":"#1d44b9","bgPage":"#ecf2f8","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 March 2024 15:38 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/10 "2024-03-21T15:38:07Z")

</div>

How would this cope with multiple people submitting at the same time though? Or is that what the `id` field is controlling?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 March 2024 15:38 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/11 "2024-03-21T15:38:51Z")

</div>

Yes the msg.parts.id would be set to the socket or username.

---

<div class="post-metadata">

**Author:** ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)\
**Post date:** [21 March 2024 20:09 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/12 "2024-03-21T20:09:10Z")

</div>

Thanks Joe and E1cid,

Both solutions are working beautifully..  
Never would have come up with these, so.. still a lot to learn.. 🙂  
Thanks very much, both of you!

Joe's solution looks a little bit cleaner and easier to expand upon.  
But great to see 2 different approaches and techniques.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 April 2024 20:09 UTC](https://discourse.nodered.org/t/multiple-input-elements-form-into-one-message/86062/13 "2024-04-20T20:09:53Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.