Send text input and select box values to one payload

[ksy]

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.

[Steve-Mcl]

@ksy

input type="button" value="Order Now" ng-click=send({document.getElementById(qty).value})

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

[Colin]

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

[ksy]

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

thanks for reply

[Steve-Mcl]

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.

[ksy]

Thanks for your advise and help.

[
    {
        "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.

[UnborN]

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.

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:

[{"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}]