# Node-red Dashboard ui-template not able to send message/payload

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-ui-template-not-able-to-send-message-payload/88265>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [25 May 2024 16:05 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-not-able-to-send-message-payload/88265 "2024-05-25T16:05:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![steelbuddy](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@steelbuddy](https://discourse.nodered.org/u/steelbuddy)\
**Post date:** [25 May 2024 16:05 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-not-able-to-send-message-payload/88265/1 "2024-05-25T16:05:31Z")

</div>

Hi,  
iI searched and tryed many options to get a payload out of this ui-template-node.  
Wether version 1 or Version 2 is sending an outpout to a Debug-node.  
have no more idea what´s wrong?  
Using v3.1.3 and old Dashboard.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/abc4ef76d7701ac51bcaad6be546f6923b3d4536.png)

Version 1

```auto
 <span class="toggle">
    <input type="checkbox"id="checkbox1" onchange="toggleState(this)">
    <label data-off="OFF" data-on="ON"></label>
</span>
<script>
  function toggleState(checkbox) {
    var msg = { payload: "" }; 
    if (checkbox.checked) 
   {
        
        msg.payload = "TRUE";
    } 
else
    {
        msg.payload = "FALSE";
    }
        node.send(msg);
  }
</script>

```

Version 2

```auto
   <span class="toggle">
        <input type="checkbox" onclick="onClickHandler(msg)" id="box3" />
        <label data-off="AUS" data-on="AN"></label>
        
    </span>

<script>
function onClickHandler(msg) 
{
var offValue = event.target.getAttribute('data-off');
var onValue = event.target.getAttribute('data-on');
var msg = { payload: "" };
if (offValue === 'AUS')
{
msg.payload = "TRUE";
return msg;
} 
else if (onValue === 'AN') 
{
msg.payload = FALSE;
return msg;
}

}
</script>

```

Thank you for your Idea:  
steelbuddy

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [25 May 2024 17:15 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-not-able-to-send-message-payload/88265/2 "2024-05-25T17:15:44Z")

</div>

Try the angularjs ng-model and ng-change  
e.g.

```auto
<span class="toggle">
    <input ng-model="mycheckbox1" type="checkbox"id="checkbox1" ng-change="toggleState(mycheckbox1)">
    <label data-off="OFF" data-on="ON"></label>
</span>
<script>
this.scope.toggleState = function(checked) { 

    if (checked){
        checked = "TRUE";
    }else{
        checked = "FALSE";
    }
    this.send({payload:checked})
}
</script>

```

---

<div class="post-metadata">

**Author:** ![steelbuddy](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@steelbuddy](https://discourse.nodered.org/u/steelbuddy)\
**Post date:** [25 May 2024 18:02 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-not-able-to-send-message-payload/88265/3 "2024-05-25T18:02:55Z")

</div>

Thx, it works 👍

---

<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:** [8 June 2024 18:03 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-not-able-to-send-message-payload/88265/4 "2024-06-08T18:03:19Z")

</div>

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