UI_Template out as msg.payload

Dashboard
1

Greetings,

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}]
2

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.

3

Hi
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">
<head>
<meta charset="utf-8">
<title>Get the Value of Text Input Field in JavaScript</title>

<style>
    input:invalid {
        border: 3px solid red;
    }

</style>

</head>

<body>
 <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>
 
 <script>


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;
    }
}
  
 </script>
 
</body>
</html>
4

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:

5

Hi
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:

6

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