# Sending user input in a UI Template as a msg.payload

**URL:** <https://discourse.nodered.org/t/sending-user-input-in-a-ui-template-as-a-msg-payload/66241>\
**Category:** Dashboard\
**Tags:** ui-widgets\
**Created:** [9 August 2022 16:27 UTC](https://discourse.nodered.org/t/sending-user-input-in-a-ui-template-as-a-msg-payload/66241 "2022-08-09T16:27:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cleroux](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cleroux](https://discourse.nodered.org/u/cleroux)\
**Post date:** [9 August 2022 16:27 UTC](https://discourse.nodered.org/t/sending-user-input-in-a-ui-template-as-a-msg-payload/66241/1 "2022-08-09T16:27:05Z")

</div>

I am new to node-red and have been trying to use a UI template node to allow a user to enter multiline comments. I want to output the entered text as a string to msg.payload and this is the closest I have been able to get.

```auto
<html>
  <body>
      <label for="text">Additional Comments:</label>
      <textarea id="textentered" rows="8" cols="25"></textarea>
      <input type="submit" value="Save Comments" ng-click="send({paylod:test()})">
  </body>
</html>
<script>
    function test() {
        var user = document.getElementById("textentered").value;
        msg.payload = user;
        return msg;
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [9 August 2022 17:49 UTC](https://discourse.nodered.org/t/sending-user-input-in-a-ui-template-as-a-msg-payload/66241/2 "2022-08-09T17:49:49Z")

</div>

everytime you use a ui-template or other dashboard ui nodes its basically an angular component (i think)  
.. so most of your code should be done through angularjs which is the front-end language the dashboard is using.

```auto

      <label for="text">Additional Comments:</label>
      <textarea id="textentered" rows="8" cols="25"></textarea>
      <input type="submit" value="Save Comments" ng-click="send({payload:test()})">

<script>

(function(scope) {

    scope.test = function() {
        console.log("TEST!!!!")
        var text = document.getElementById("textentered").value;
        return text;
        // msg.payload = user;
        // return msg;
    }

})(scope)

</script>

```

.. and you dont need **html** and **body** tags as those are already loaded in the main document .. your additional html and code will be injected in that _placeholder_ when you deploy and all variables and functions need to be added to the scope of that angular component .. complicated stuff 😉 .. but you can study the examples on the ui-templates help tab

---

<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:** [23 August 2022 17:50 UTC](https://discourse.nodered.org/t/sending-user-input-in-a-ui-template-as-a-msg-payload/66241/3 "2022-08-23T17:50:35Z")

</div>

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