How to get checkbox data in UI?

I'm trying to get data from checkbox alert in Node-red. Inside the template node,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script>
window.onload = function(){
    for(var i = 0; i < document.getElementsByTagName('input').length; i++){
        if(document.getElementsByTagName('input')[i].getAttribute('type') == 'checkbox'){
            document.getElementsByTagName('input')[i].checked = true;
        }
    }
};
</script>
</head>
<body>
<label>test<input type="checkbox" name="test1" onclick="send({payload: 1})" /></label>
<label>test<input type="checkbox" /></label>
<label>test<input type="checkbox" /></label>
<label>test<input type="checkbox" /></label>
</body>
</html>  

This is my Code in template node. If i inject the node, notification appears.

Even i press Ok/Cancel, nothing happened.The only payload that i can see is

this one which i first inject node, raw template code appears.

What i want to do is, I want individual output among those checkboxes.

For example, if i check 'test1', I wanna make msg.payload="test1" or any number, string etc.

If i check 'test2', 'test3' , 'test4' same. Anyone knows about this? Tnx for reading.

[ { "id": "6a445b83eb98086b", "type": "tab", "label": "플로우 2", "disabled": false, "info": "", "env": [] }, { "id": "a1bcbf893316b76a", "type": "ui_toast", "z": "6a445b83eb98086b", "position": "dialog", "displayTime": "3", "highlight": "", "sendall": true, "outputs": 1, "ok": "OK", "cancel": "Cancel", "raw": true, "className": "", "topic": "", "name": "", "x": 450, "y": 120, "wires": [ [] ] }, { "id": "57461552ebe0a887", "type": "inject", "z": "6a445b83eb98086b", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 120, "y": 120, "wires": [ [ "04f1b9d83919a0f3" ] ] }, { "id": "04f1b9d83919a0f3", "type": "template", "z": "6a445b83eb98086b", "name": "", "field": "payload", "fieldType": "msg", "format": "html", "syntax": "mustache", "template": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\" />\n<title>test</title>\n<script>\nwindow.onload = function(){\n for(var i = 0; i < document.getElementsByTagName('input').length; i++){\n if(document.getElementsByTagName('input')[i].getAttribute('type') == 'checkbox'){\n document.getElementsByTagName('input')[i].checked = true;\n }\n }\n};\n\nfunction handle(){ \n node.send(\"{'name':'\"+e.target.name+\"'}\");\n }\n \n</script>\n</head>\n<body>\n <label>test<input type=\"checkbox\" name=\"test1\" onclick=\"send({payload: 1})\" /></label>\n <label>test<input type=\"checkbox\" /></label>\n <label>test<input type=\"checkbox\" /></label>\n <label>test<input type=\"checkbox\" /></label>\n</body>\n</html>", "output": "str", "x": 270, "y": 120, "wires": [ [ "39ccd676b253dd83", "a1bcbf893316b76a" ] ] }, { "id": "39ccd676b253dd83", "type": "debug", "z": "6a445b83eb98086b", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "statusVal": "", "statusType": "auto", "x": 450, "y": 180, "wires": [] } ]

Regards.

I might not be right but it seems the notification node is limited. As a workaround you could use the angular mdDialog service in ui-template nodes. To my opinion this really sucks. I tried to realise an example not knowing if this is totally free of errors:

[
    {
        "id": "06ce0c67de868d70",
        "type": "tab",
        "label": "ui-temp modal dialog",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "29554d9cf6288f39",
        "type": "ui_template",
        "z": "06ce0c67de868d70",
        "group": "150a555a50d00122",
        "name": "Modal Call",
        "order": 0,
        "width": "6",
        "height": "2",
        "format": "\n<script>\n    (function(scope){\n        scope.items = ['Apple', 'Peach', 'Banana', 'Kiwi'];\n        \n        scope.showDialog = function() {\n            var injector = angular.element(\"#nr-dashboard\").injector();\n            injector.invoke(testShowDialog,null,{$scope:scope});\n        };\n\n        scope.$watch('msg', function(msg) {\n            if(msg !== undefined && msg !== null){\n                try{\n                    switch(msg.topic) {\n                    case \"mdDialog\":\n                        scope.showDialog();\n                    break;\n                    default:\n                }\n                }catch(err){\n                    console.error(err);\n                }\n            }\n        });\n    })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 710,
        "y": 280,
        "wires": [
            [
                "6b232bfeb9ba43a5"
            ]
        ]
    },
    {
        "id": "6b232bfeb9ba43a5",
        "type": "debug",
        "z": "06ce0c67de868d70",
        "name": "debug 2",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1000,
        "y": 280,
        "wires": []
    },
    {
        "id": "7712883457e913d8",
        "type": "ui_template",
        "z": "06ce0c67de868d70",
        "group": "75ebc3ea4eb4a464",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #Dashboard_modal{\n        visibility:hidden;\n    }   \n</style>\n\n<script>\nvar testShowDialog = function ($mdDialog, $scope) {\n    const ctrl = DialogController;\n    ctrl.$scope = $scope;\n    const parentEl = angular.element(document.body);\n    $mdDialog.show({\n        parent: parentEl,\n        template:\n            '<md-dialog aria-label=\"List dialog\">' +\n                ' <md-dialog-content>'+\n                    '<label>test<input id=\"dialoginput0\" type=\"checkbox\" value=\"'+ctrl.$scope.items[0]+'\"/></label>' +\n                    '<label>test<input id=\"dialoginput1\" type=\"checkbox\" value=\"'+ctrl.$scope.items[1]+'\"/></label>' +\n                    '<label>test<input id=\"dialoginput2\" type=\"checkbox\" value=\"'+ctrl.$scope.items[2]+'\"/></label>' +\n                    '<label>test<input id=\"dialoginput3\" type=\"checkbox\" value=\"'+ctrl.$scope.items[3]+'\"/></label>' +\n                ' </md-dialog-content>' +\n                ' <md-dialog-actions>' +\n                    ' <md-button ng-click=\"ctrl.closeDialog()\" class=\"md-primary\">' +\n                        ' Close Dialog' +\n                        ' </md-button>' +\n                    ' </md-dialog-actions>' +\n                '</md-dialog>',\n        locals: {\n            items: ctrl.$scope.items\n            },\n        controller: DialogController,\n        controllerAs: 'ctrl',\n        isolateScope: false\n    });\n    \n    function DialogController($mdDialog) {\n        this.closeDialog = function() {\n            payload = [];\n            for(let i=0; i<4; i++){\n                const el = $('#dialoginput'+i)[0];\n                let obj = {};\n                obj[el.value] = el.checked;\n                payload.push(obj);\n            }\n            $scope.send({payload:payload});\n            $mdDialog.hide();\n        }\n    }\n}\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 700,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "5c5cd97880a3d982",
        "type": "inject",
        "z": "06ce0c67de868d70",
        "name": "trigger",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "mdDialog",
        "x": 390,
        "y": 280,
        "wires": [
            [
                "29554d9cf6288f39"
            ]
        ]
    },
    {
        "id": "e4b076b5c75360fd",
        "type": "ui_text_input",
        "z": "06ce0c67de868d70",
        "name": "",
        "label": "",
        "tooltip": "",
        "group": "21094787ed47ee5e",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 700,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "150a555a50d00122",
        "type": "ui_group",
        "name": "modal",
        "tab": "911a0d7d34b66434",
        "order": 5,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "75ebc3ea4eb4a464",
        "type": "ui_group",
        "name": "Mainfolder",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "21094787ed47ee5e",
        "type": "ui_group",
        "name": "Group 2",
        "tab": "911a0d7d34b66434",
        "order": 2,
        "disp": true,
        "width": 6
    },
    {
        "id": "911a0d7d34b66434",
        "type": "ui_tab",
        "name": "Dashboard",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

You need click responses to the checkboxes, too. Then exchange the header script to:

var testShowDialog = function ($mdDialog, $scope) {
    const ctrl = DialogController;
    ctrl.$scope = $scope;
    const parentEl = angular.element(document.body);
    $mdDialog.show({
        parent: parentEl,
        template:
            '<md-dialog aria-label="List dialog">' +
                ' <md-dialog-content ng-click="ctrl.cbxClick($event)">'+
                    '<label>test<input id="dialoginput0" type="checkbox" value="'+ctrl.$scope.items[0]+'"/></label>' +
                    '<label>test<input id="dialoginput1" type="checkbox" value="'+ctrl.$scope.items[1]+'"/></label>' +
                    '<label>test<input id="dialoginput2" type="checkbox" value="'+ctrl.$scope.items[2]+'"/></label>' +
                    '<label>test<input id="dialoginput3" type="checkbox" value="'+ctrl.$scope.items[3]+'"/></label>' +
                ' </md-dialog-content>' +
                ' <md-dialog-actions>' +
                    ' <md-button ng-click="ctrl.closeDialog()" class="md-primary">' +
                        ' Close Dialog' +
                        ' </md-button>' +
                    ' </md-dialog-actions>' +
                '</md-dialog>',
        locals: {
            items: ctrl.$scope.items
            },
        controller: DialogController,
        controllerAs: 'ctrl',
        isolateScope: false
    });
    
    function DialogController($mdDialog) {
        this.closeDialog = function() {
            payload = [];
            for(let i=0; i<4; i++){
                const el = $('#dialoginput'+i)[0];
                let obj = {};
                obj[el.value] = el.checked;
                payload.push(obj);
            }
            $scope.send({payload:payload});
            $mdDialog.hide();
        }
        this.cbxClick = function($event) {
            if(event.target.id){
            }
                if(event.target.id.startsWith('dialoginput')){
                obj = {};
                obj[$event.target.value] = $event.target.checked;
                $scope.send({payload:obj});
            }
        }
    }
}
1 Like

Tnx! My problem 99% solved :smiley:

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