Sending msg.payload inside template

General
1

I have read the UI sidebar for template node, but my use case is not the same.
I have a CSS defined button call this script.

function state(){
var checkbox = document.getElementById("myonoffswitch");
if (checkbox.checked == true){
alert("true");
"send({payload: 'Clean_on' })"
} else {
alert("false");
"send({payload: 'Clean_off' })"
}
}

I know the script is being called because of the alerts I have added. I know the send() command I have entered is incorrect. I have read plenty of forums and cannot discern how to send a message to payload in the if else statement.

2

You have put double-quotes around the send function making into a string. It needs to be a function call not a string.

Also, please wrap code with the appropriate markup so that it is more easily readable.

3

Yes, as I said I know it is wrong.

What is the correct syntax for the send() command in this example. What do you mean send need to be a function call?

<script>
function state(){
var checkbox = document.getElementById("myonoffswitch");
  if (checkbox.checked == true){
     alert("true");
     node.send({payload: 'Clean_on' })
  } else {
     alert("false");
     node.send({payload: 'Clean_off' })
  }
}
</script>
4

Now that you have removed the quotes, you have valid function syntax.

Next step is to ask - which template node are you using - the Node-RED template which uses Mustache to integrate msg data and outputs html - or the Dashboard template node which sends the template to the client browser and integrates to Angular?

If the former, then you cannot use send because - assuming you are using the template node with http-in/-out, you don't have any communications between the client browser and the server.

If using the Dashboard template, you can't use the node object (as in node.send()) since that doesn't exist in the front-end (client browser) but only in the back-end (Node-RED server).

To send data back to Node-RED from a Dashboard page, you will find some help here:

5

I am using UI template node.
Here is the whole script.
I am getting a DSN error on the link

<style>
.onoffswitch {
    position: relative; width: 62px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 18px; padding: 0; line-height: 18px;
    font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #75D116; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EF292A; color: #FFFFFF;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 12px; margin: 3px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 40px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
</style>

<div layout="row" layout-align="space-between" style="padding:0px; text-align: left; margin:2px; border:2px solid black;">
<span style="width:28%;padding-top:5px;padding-left:5px;">{{"Clean"}}</span>
<span style="width:35%; padding-top:3px;">

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" onclick="state()" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

<script>
function state(){
var checkbox = document.getElementById("myonoffswitch");
  if (checkbox.checked == true){
     alert("true");
     "send({payload: 'Clean_on' })"
  } else {
     alert("false");
     "send({payload: 'Clean_off' })"
  }
}
</script>

</span>
</div>
6

I think that you should do some reading on the use of Angular v1. You can use Angular to respond to changes in a checkbox.

Also, your template has the quotes back around the send. Please read the blog post and change your state function to be driven by Angular rather than trying to do the getElementById which isn't necessary.