UI_Template out as msg.payload


I am doing a login page on node red dashboard with a template node and process the password by a function node.
But I found the code like var pass = document.getElementById("myInput").value; msg.payload = pass; is not working in the template node.
So, I would like to know whether there is a way to manipulate an input type variable inside the template node to send out as msg.payload.
For addition, I would like to mask the input PIN or generate them into asterisk, I've tried to use the HTML method such as <input type="password">. But I would like to restrict the password type for only numeric like PIN.
Hope someone can help me in solving this problems, thank you in advance.

Best Regards.

My flow :

[{"id":"4e9508a2.8db5a8","type":"ui_template","z":"12b0f2fc.e8bcad","group":"3dd3d054.f8b94","name":"","order":1,"width":6,"height":5,"format":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Get the Value of Text Input Field in JavaScript</title>\n</head>\n<body>\n    <input type=\"password\" placeholder=\"Please your enter 6 digit PIN\" id=\"myInput\" maxlength=\"6\">\n    <button type=\"button\" onclick=\"getInputValue();\">Get Value</button>\n    \n    <script>\n        function getInputValue(){\n            // Selecting the input element and get its value \n            var inputVal = document.getElementById(\"myInput\").value;\n            alert(inputVal);\n            msg.payload=inputVal;\n            return msg;\n        }\n    </script>\n   \n</body>\n</html>\n    \n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":300,"y":100,"wires":[["14a9846a.639dac"]]},{"id":"14a9846a.639dac","type":"debug","z":"12b0f2fc.e8bcad","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":490,"y":100,"wires":[]},{"id":"3dd3d054.f8b94","type":"ui_group","z":"","name":"User Account","tab":"600a448d.6d0ebc","disp":true,"width":"6","collapse":false},{"id":"600a448d.6d0ebc","type":"ui_tab","z":"","name":"Login","icon":"supervisor_account","order":2,"disabled":false,"hidden":false}]

When posting code, please use the </> button in the menu.

If not, sometimes things are negated in being shown how you did it.
That then makes it difficult for anyone else to read the code.

I'm no expert and I am sure that there are better ways but this works (as far as I can tell by Googling there is no way to restrict what is input to an input box. The CSS just highlights the box when an invalid entry is made;

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Get the Value of Text Input Field in JavaScript</title>

    input:invalid {
        border: 3px solid red;



 <input type="password" placeholder="Please your enter 6 digit PIN" id="myInput" maxlength="6" pattern="[0-9]+">
 <button type="button" ng-click = "send({payload: getInputValue()})">Get Value</button>

this.scope.getInputValue = function() {
    var inputVal = document.getElementById("myInput").value;
    if (!Number.isNaN(parseInt(inputVal, 10))) {
        return inputVal;

    } else {
        alert("Numerics Only");

        document.getElementById("myInput").value = "";
        return false;

Thank you @Buckskin for the effort in helping me out. As I know, the <input type="number"> can restrict for the input type, just with this method I will be facing problem on how to mask it afterwards. And I've tried your code, but nor matter which number I key in for the password will still getting "Numerics Only". :sweat_smile:

I found that if there were two copies of the UI Template node with an input box then it fails with the problem that you found. I changed the 'if' statement to if (!isNaN(inputVal)) and this seemed to solve the problem. (It is easier to understand also) :smiley:

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