# UI\_Template out as msg.payload

**URL:** <https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035>\
**Category:** Dashboard\
**Created:** [9 June 2020 08:14 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035 "2020-06-09T08:14:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)\
**Post date:** [9 June 2020 08:14 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035/1 "2020-06-09T08:14:05Z")

</div>

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 :

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

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 June 2020 08:17 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035/2 "2020-06-09T08:17:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [9 June 2020 16:24 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035/3 "2020-06-09T16:24:16Z")

</div>

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;

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)\
**Post date:** [10 June 2020 01:34 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035/4 "2020-06-10T01:34:57Z")

</div>

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". 😅

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [10 June 2020 13:56 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035/5 "2020-06-10T13:56:47Z")

</div>

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) 😃

---

<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 July 2020 13:56 UTC](https://discourse.nodered.org/t/ui-template-out-as-msg-payload/28035/6 "2020-07-10T13:56:55Z")

</div>

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