# Building a 3 element array from "form" and "dropdown" nodes to send on button click
**URL:** https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385
**Category:** General
**Created:** [20 July 2020 09:45 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385 "2020-07-20T09:45:39Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 09:45 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/1 "2020-07-20T09:45:39Z")
Hello. I am trying to figure out the most logical way to build a 3 element payload array and out of form and dropdown nodes.
1 variable comes from "dropdown" node ( "Device")
2 variables comes from "form" node ("Item", "Serial").
I have initially built this flow:
However, with this flow I am facing a problem - whenever I select an item from dropdown menu, it immidiately sends an output signal to "join" node which is configured to count to 3. Another 2 variables come from "form" node. If an operator makes a mistake or needs to change the device from dropdown menu, it will automatically trigger another output signal and add +1 to the counter in join node which will only leave me 1 variable available which is not correct!
What I want to build instead, is a simmilar approach but instead, I would fill my array DBdata[2] with the variables from form and dropdown, and only send the data to the output when I press a button. I have tried to implement it here:
flow:
```auto
[{"id":"9d8656d9.cb81f8","type":"debug","z":"beb7a2a.0c08b6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":850,"y":1900,"wires":[]},{"id":"7e41d220.32d40c","type":"mui_form","z":"beb7a2a.0c08b6","name":"","label":"Add data to MYSQL pack_to_light table test","group":"f9b77890.739788","order":2,"width":0,"height":0,"options":[{"label":"Item","value":"Item","type":"text","required":true,"rows":null},{"label":"Serial","value":"Serial","type":"number","required":true,"rows":null}],"formValue":{"Item":"","Serial":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":310,"y":1760,"wires":[["e351811f.0731","4ea178f0.80ad28"]]},{"id":"e5601425.fee918","type":"mui_dropdown","z":"beb7a2a.0c08b6","name":"","label":"Select device test","tooltip":"","place":"Select option","group":"f9b77890.739788","order":1,"width":0,"height":0,"passthru":true,"options":[{"label":"Device1","value":"Device1","type":"str"},{"label":"Device2","value":"Device2","type":"str"},{"label":"Device3","value":"Device3","type":"str"}],"payload":"","topic":"","x":250,"y":1680,"wires":[["b633b442.b45bc8"]]},{"id":"b633b442.b45bc8","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata","rules":[{"t":"set","p":"DBdata[0]","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":1680,"wires":[["9750fe28.a955d"]]},{"id":"e351811f.0731","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata","rules":[{"t":"set","p":"DBdata[1]","pt":"flow","to":"payload.Item","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":1740,"wires":[["24f20766.7504e8"]]},{"id":"4ea178f0.80ad28","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata","rules":[{"t":"set","p":"DBdata[2]","pt":"flow","to":"payload.Serial","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":1780,"wires":[["a782eb90.9ff0b8"]]},{"id":"e586ad95.c891e","type":"mui_button","z":"beb7a2a.0c08b6","name":"","group":"f9b77890.739788","order":4,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":230,"y":1900,"wires":[["2ff66de1.36f8e2"]]},{"id":"a782eb90.9ff0b8","type":"debug","z":"beb7a2a.0c08b6","name":"SErial","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":750,"y":1780,"wires":[]},{"id":"24f20766.7504e8","type":"debug","z":"beb7a2a.0c08b6","name":"Item","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":750,"y":1740,"wires":[]},{"id":"9750fe28.a955d","type":"debug","z":"beb7a2a.0c08b6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":770,"y":1680,"wires":[]},{"id":"2ff66de1.36f8e2","type":"change","z":"beb7a2a.0c08b6","name":"Add 3 flows to build an array","rules":[{"t":"set","p":"payload[0]","pt":"flow","to":"DBdata[0]","tot":"flow"},{"t":"set","p":"payload[1]","pt":"flow","to":"DBdata[1]","tot":"flow"},{"t":"set","p":"payload[2]","pt":"flow","to":"DBdata[2]","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":1900,"wires":[["9512d53c.d579c8"]]},{"id":"9512d53c.d579c8","type":"debug","z":"beb7a2a.0c08b6","name":"combined","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":640,"y":1980,"wires":[]},{"id":"f9b77890.739788","type":"mui_group","name":"mGroup 1","tab":"5d85eb08.22c5a4","order":1,"disp":true,"width":6},{"id":"5d85eb08.22c5a4","type":"mui_tab","name":"Tab 2","icon":"dashboard","order":2}]
```
However, it does not seem to work as I have expected - it does not add the payloads when the button is pressed.
Switch node for each variable looks like this:
Switch node when button is pressed:
Join node:
Any ideas on how to make it work properly?
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [20 July 2020 09:53 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/2 "2020-07-20T09:53:54Z")
You may get quicker replies if you post the code as required.
[Read this](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506/2)
---
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 09:56 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/3 "2020-07-20T09:56:31Z")
Sorry! Fixed it now
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [20 July 2020 10:00 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/4 "2020-07-20T10:00:11Z")
Just mentioning:
You are using the `MUI` dashboard. That isn't the one most people use.
Therefore it is very difficult for anyone to test it for you, as they would have to un-install the existing dashboard and install that one.
If you are new to Node-Red, I would suggest you use the more common one:
[This one.](https://flows.nodered.org/node/node-red-dashboard)
---
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 10:03 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/5 "2020-07-20T10:03:14Z")
Multiple people will be using the dashboard at the same time, that is why I have chose this one. I actually found out about this by accident and realized that this is exactly what I need. I think the only difference between MUI and the original one is that if a person change input variables on one instance, the other person will not be seeing those changes.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [20 July 2020 10:05 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/6 "2020-07-20T10:05:10Z")
I'm not going to really comment on that.
I am simply saying: Most people here will not uninstall their dashboard to load the one you want to use.
**IF** people do use it, you are limiting the people who can help you.
---
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 10:08 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/7 "2020-07-20T10:08:47Z")
```auto
[{"id":"9d8656d9.cb81f8","type":"debug","z":"beb7a2a.0c08b6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":870,"y":1900,"wires":[]},{"id":"b633b442.b45bc8","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata","rules":[{"t":"set","p":"DBdata.device","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1680,"wires":[["9750fe28.a955d"]]},{"id":"e351811f.0731","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata","rules":[{"t":"set","p":"DBdata.item","pt":"flow","to":"payload.Item","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1740,"wires":[["24f20766.7504e8"]]},{"id":"4ea178f0.80ad28","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata","rules":[{"t":"set","p":"DBdata.serial","pt":"flow","to":"payload.Serial","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1780,"wires":[["a782eb90.9ff0b8"]]},{"id":"a782eb90.9ff0b8","type":"debug","z":"beb7a2a.0c08b6","name":"SErial","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":770,"y":1780,"wires":[]},{"id":"24f20766.7504e8","type":"debug","z":"beb7a2a.0c08b6","name":"Item","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":770,"y":1740,"wires":[]},{"id":"9750fe28.a955d","type":"debug","z":"beb7a2a.0c08b6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":1680,"wires":[]},{"id":"2ff66de1.36f8e2","type":"change","z":"beb7a2a.0c08b6","name":"Add 3 flows to build an array","rules":[{"t":"set","p":"payload[0]","pt":"msg","to":"DBdata.device","tot":"flow"},{"t":"set","p":"payload[1]","pt":"msg","to":"DBdata.item","tot":"flow"},{"t":"set","p":"payload[2]","pt":"msg","to":"DBdata.serial","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":1900,"wires":[["9512d53c.d579c8"]]},{"id":"9512d53c.d579c8","type":"debug","z":"beb7a2a.0c08b6","name":"combined","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":680,"y":1900,"wires":[]},{"id":"7e9e942c.815e5c","type":"ui_dropdown","z":"beb7a2a.0c08b6","name":"","label":"select device","tooltip":"","place":"Select option","group":"e4811454.ed8328","order":5,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Device1","value":"Device1","type":"str"},{"label":"Device2","value":"Device2","type":"str"},{"label":"Device3","value":"Device3","type":"str"}],"payload":"","topic":"","x":260,"y":1620,"wires":[["b633b442.b45bc8"]]},{"id":"5d982d32.d36d14","type":"ui_form","z":"beb7a2a.0c08b6","name":"","label":"add data to mysql","group":"e4811454.ed8328","order":4,"width":0,"height":0,"options":[{"label":"Item","value":"Item","type":"text","required":true,"rows":null},{"label":"Serial","value":"Serial","type":"number","required":true,"rows":null}],"formValue":{"Item":"","Serial":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":270,"y":1760,"wires":[["4ea178f0.80ad28","e351811f.0731"]]},{"id":"e32bd3cc.34316","type":"ui_button","z":"beb7a2a.0c08b6","name":"","group":"e4811454.ed8328","order":3,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":250,"y":1940,"wires":[["2ff66de1.36f8e2"]]},{"id":"e4811454.ed8328","type":"ui_group","z":"","name":"TEST1","tab":"df4cfad1.0f1a18","order":1,"disp":true,"width":"6","collapse":false},{"id":"df4cfad1.0f1a18","type":"ui_tab","z":"","name":"Testing","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
```
This is the flow for original UI.
Also, you do not need to uninstall the original gui to use MUI. I am using both at the same time.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [20 July 2020 10:11 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/8 "2020-07-20T10:11:23Z")
Well, that doesn't have the `join` node, so it is a waste of time posting when you say:
> [@zazas321](#):
>
> whenever I select an item from dropdown menu, it immidiately sends an output signal to "join" node which is configured to count to 3.
I'm outa here.
---
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 10:14 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/10 "2020-07-20T10:14:35Z")
I was not sure if I even need join. If I add varaibles 1 by 1 to flow array and then just trying to print a whole array when button is pressed
---
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 11:08 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/11 "2020-07-20T11:08:49Z")
I will try to clarify the problem. I have made slight changes:
flow:
```auto
[{"id":"b633b442.b45bc8","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata.device","rules":[{"t":"set","p":"DBdata[0]","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":1680,"wires":[["9750fe28.a955d"]]},{"id":"e351811f.0731","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata.item","rules":[{"t":"set","p":"DBdata[1]","pt":"flow","to":"payload.Item","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":1740,"wires":[[]]},{"id":"4ea178f0.80ad28","type":"change","z":"beb7a2a.0c08b6","name":"set flow DBdata.serial","rules":[{"t":"set","p":"DBdata[2]","pt":"flow","to":"payload.Serial","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":1780,"wires":[[]]},{"id":"9750fe28.a955d","type":"debug","z":"beb7a2a.0c08b6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":930,"y":1680,"wires":[]},{"id":"2ff66de1.36f8e2","type":"change","z":"beb7a2a.0c08b6","name":"Add 3 flows to build an array","rules":[{"t":"set","p":"payload[0]","pt":"msg","to":"DBdata[0]","tot":"flow"},{"t":"set","p":"payload[1]","pt":"msg","to":"DBdata[1]","tot":"flow"},{"t":"set","p":"payload[2]","pt":"msg","to":"DBdata[2]","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":1900,"wires":[["bd363f33.92efb"]]},{"id":"9512d53c.d579c8","type":"debug","z":"beb7a2a.0c08b6","name":"combined","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1040,"y":1900,"wires":[]},{"id":"bd363f33.92efb","type":"join","z":"beb7a2a.0c08b6","name":"","mode":"custom","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":790,"y":1900,"wires":[["9512d53c.d579c8"]]},{"id":"3bd4ce44.193872","type":"ui_dropdown","z":"beb7a2a.0c08b6","name":"","label":"Select device test","tooltip":"","place":"Select option","group":"aef249c8.8ccee8","order":3,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Device1","value":"Device1","type":"str"},{"label":"Device2","value":"Device2","type":"str"},{"label":"Device3","value":"Device3","type":"str"}],"payload":"","topic":"","x":330,"y":1680,"wires":[["b633b442.b45bc8"]]},{"id":"d4fea44a.990148","type":"ui_form","z":"beb7a2a.0c08b6","name":"","label":"Add data to mysql table test","group":"aef249c8.8ccee8","order":4,"width":0,"height":0,"options":[{"label":"Item","value":"Item","type":"text","required":true,"rows":null},{"label":"Serial","value":"Serial","type":"text","required":true,"rows":null}],"formValue":{"Item":"","Serial":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":360,"y":1760,"wires":[["e351811f.0731","4ea178f0.80ad28"]]},{"id":"f0aeda3f.18e048","type":"ui_button","z":"beb7a2a.0c08b6","name":"","group":"aef249c8.8ccee8","order":5,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":270,"y":1900,"wires":[["2ff66de1.36f8e2"]]},{"id":"aef249c8.8ccee8","type":"ui_group","z":"","name":"test123","tab":"bba97868.2e14a8","order":1,"disp":true,"width":"6","collapse":false},{"id":"bba97868.2e14a8","type":"ui_tab","z":"","name":"test123","icon":"dashboard","order":5,"disabled":false,"hidden":false}]
```
"Switch"nodes to fill DBdata array:
  
If I submit form and dropdown tables, I should get:
DBdata[0] = Device1
DBdata[1] = Item1234
DBdata[2] = 1234
When I press button, DBdata array is converted to payload array data:
msg.payload[0]=Device1
msg.payload[1]=Item1234
msg.payload[2]=1234
When the button is clicked, I get an error:
```auto
msg : string[50]
"Cannot set property of non-object type: payload[0]"
```
---
### Author:  [@zazas321](https://discourse.nodered.org/u/zazas321)
#### Post date: [20 July 2020 11:50 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/12 "2020-07-20T11:50:05Z")
I have also found out a new problem:
I have changed the switch function when the button is clicked to output msg.payload instead of payload array and the result is very strange. I am getting all kids of data ( even the data that I have not recently used as input) which implies that the DBdata is not cleared when i restart the flow. How to prevent this from happening?
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 September 2020 11:50 UTC](https://discourse.nodered.org/t/building-a-3-element-array-from-form-and-dropdown-nodes-to-send-on-button-click/30385/13 "2020-09-18T11:50:17Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.