# Send text input and select box values to one payload

**URL:** <https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196>\
**Category:** Dashboard\
**Created:** [26 August 2021 06:11 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196 "2021-08-26T06:11:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ksy](https://avatars.discourse-cdn.com/v4/letter/k/ed8c4c/32.png) [@ksy](https://discourse.nodered.org/u/ksy)\
**Post date:** [26 August 2021 06:11 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/1 "2021-08-26T06:11:08Z")

</div>

![20210826_145141](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22bff2071612911c5ed0a6b720623d3a694afa09.jpeg)

Hi, everyone  
I want to send payload with text input(id : qty) when button is clicked.

at first i tried with string  
input type="button" value="Order Now" ng-click=send({payload:"10"})  
it worked so replace string to value of input text  
input type="button" value="Order Now" ng-click=send({document.getElementById(qty).value})  
but it's not working.

I'm very new script.  
Pls help~!

thank you in advance.

---

<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:** [26 August 2021 07:10 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/2 "2021-08-26T07:10:33Z")

</div>

> [@ksy](#):
>
> input type="button" value="Order Now" ng-click=send({document.getElementById(qty).value})

try `ng-click="send({payload: document.getElementById('qty').value})"`

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2021 07:18 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/3 "2021-08-26T07:18:09Z")

</div>

Or use the dashboard form node which is designed for exactly this.

---

<div class="post-metadata">

**Author:** ![ksy](https://avatars.discourse-cdn.com/v4/letter/k/ed8c4c/32.png) [@ksy](https://discourse.nodered.org/u/ksy)\
**Post date:** [26 August 2021 08:03 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/4 "2021-08-26T08:03:36Z")

</div>

![20210826_170235](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33f1171fc3ebe3eef671b581bfeadca7d2ae3e65.jpeg)

I got this...something is going on...still

thanks for reply

---

<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:** [26 August 2021 08:10 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/5 "2021-08-26T08:10:27Z")

</div>

As you didn't post full information, I had to guess you set the `id` of your input to `qty` - I don't know for certain.

All I can say is you are now at least able to send a msg, you just have to figure out the HTML parts.

This is a node-red forum for node-red issues and features really (not a general how to code HTML & DOM accessors forum).

I would suggest go look around the internet for "how to get the value from an input" then apply that to your code.

Perhaps try adding a `alert(xxxxxxxx)` to display the value of your input when the button is pressed etc - once you have that right, then use it in your handler.

Ps, or use the UI\_FORM or other ui inputs and button as Colin suggests.

---

<div class="post-metadata">

**Author:** ![ksy](https://avatars.discourse-cdn.com/v4/letter/k/ed8c4c/32.png) [@ksy](https://discourse.nodered.org/u/ksy)\
**Post date:** [26 August 2021 23:11 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/6 "2021-08-26T23:11:40Z")

</div>

Thanks for your advise and help.

```auto
[
    {
        "id": "1ee5ca4fb4ae2208",
        "type": "tab",
        "label": "flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "73c3e575a599766e",
        "type": "ui_template",
        "z": "1ee5ca4fb4ae2208",
        "group": "e6f2be652af785c5",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<select id =\"type\">\n <option value =\"1\">Metal</option>\n <option value =\"2\">No-Meal</option>\n</select>\n<br>\n<input type=\"text\" id =\"qty\" value=\"1\" />\n<br>\n<input type=\"button\" value=\"Order Now\" ng-click=\"send({qty:document.getElementById('qty').value})\" />",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 280,
        "y": 120,
        "wires": [
            [
                "bf8e13ea7f8647d0"
            ]
        ]
    },
    {
        "id": "bf8e13ea7f8647d0",
        "type": "debug",
        "z": "1ee5ca4fb4ae2208",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "qty",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 480,
        "y": 120,
        "wires": []
    },
    {
        "id": "e6f2be652af785c5",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "1b2433fe711aa897",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "1b2433fe711aa897",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

I just want that when i press button, send payload with some values from template element.  
I thought it might easy but wasn't  
maybe i need to spend more time with Node-RED and Forum.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 August 2021 00:57 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/7 "2021-08-27T00:57:26Z")

</div>

Hello Ksy,

The dashboard is based on the AngularJS front-end framework.  
I find some of its commands difficult to understand also. There are some examples on the Help tab for the **ui\_template** node and there is some further reading material on the [w3schools website](https://www.w3schools.com/angular/angular_model.asp).

What you could do for your example is a two way **binding** with `ng-model` between the value of the input element and an angular variable and then trigger a predefined function instead with  
`ng-click="sendMsg()"` to send the msg back to node-red.

**Example Flow:**

```auto
[{"id":"73c3e575a599766e","type":"ui_template","z":"1ee5ca4fb4ae2208","group":"e6f2be652af785c5","name":"","order":1,"width":0,"height":0,"format":"<select id =\"type\">\n <option value =\"1\">Metal</option>\n <option value =\"2\">No-Meal</option>\n</select>\n<br>\n<input type=\"text\" id =\"qty\" ng-model=\"qty\" />\n<br>\n<input type=\"button\" value=\"Order Now\" ng-click=\"sendMsg()\" />\n<script>\n (function(scope) {\n\nscope.qty = 3; // initial value to bind to qty\n\nscope.sendMsg = function() {\n scope.send({ payload: { qty: Number(scope.qty)}})\n}\n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":280,"y":120,"wires":[["bf8e13ea7f8647d0"]]},{"id":"bf8e13ea7f8647d0","type":"debug","z":"1ee5ca4fb4ae2208","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":470,"y":120,"wires":[]},{"id":"e6f2be652af785c5","type":"ui_group","name":"Group 1","tab":"1b2433fe711aa897","order":1,"disp":true,"width":6},{"id":"1b2433fe711aa897","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [10 September 2021 00:58 UTC](https://discourse.nodered.org/t/send-text-input-and-select-box-values-to-one-payload/50196/8 "2021-09-10T00:58:01Z")

</div>

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