# Send msg.payload on html button
**URL:** \
**Category:** General\
**Created:** [21 November 2021 17:28 UTC](https://discourse.nodered.org/t/send-msg-payload-on-html-button/54073 "2021-11-21T17:28:56Z")\
**Posts on this page:** 7\
**Page:** 1
Hello,
I have created a custom checkbox button, based on internet codes, that allows me to use svg images in the background, now I am trying that when changing the button from unchecked to checked it sends as a "true" message and when it changes back to unchecked it sends "false" and finally that if you receive a message through the node's input change the state of the button.
If someone can correct the code and show me how it should be, I thank you very much.
this is the code of the button that I use inside a node \ Template :
```auto
```
This is the code of the flow:
```auto
[
{
"id": "9e681f07834eca88",
"type": "ui_template",
"z": "c63156752fca1a29",
"group": "87e79a83.f45268",
"name": "Button",
"order": 0,
"width": 0,
"height": 0,
"format": "\n\n\n\n\n\n\n\n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 150,
"y": 80,
"wires": [
[]
]
},
{
"id": "87e79a83.f45268",
"type": "ui_group",
"name": "Pan and zoom feature",
"tab": "",
"order": 1,
"disp": true,
"width": "14",
"collapse": false
}
]
```
---
Try this :
```auto
[{"id":"9e681f07834eca88","type":"ui_template","z":"5847b7aa62131d37","group":"62350f50d4b09ff8","name":"Button","order":6,"width":0,"height":0,"format":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":1200,"wires":[["78ef36349fc4eaef"]]},{"id":"78ef36349fc4eaef","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":1200,"wires":[]},{"id":"62350f50d4b09ff8","type":"ui_group","name":"Group1","tab":"554e77d51ad13f2d","order":1,"disp":false,"width":"11","collapse":false,"className":""},{"id":"554e77d51ad13f2d","type":"ui_tab","name":"Tab1","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
ps. i changed the css opacity to 1 because i didnt have your svg and i could see the checkbox
---
Thanks for the answers sent, I would like to ask you another question with the subject, you already showed me how to make the button send the message, but now I have the following problem.
1. The button does not keep the state, that is, if it is checked when changing the tab and returning again to the tab where the button is, the state of the button returns to unchecked.
2. If the button receives a true or false message, it should change to check or uncheck
Thank you again for your help and for the time.
---
> [@fmejialo](#):
>
> The button does not keep the state
You have to use the **Reload last value on refresh** and **Add output messages to stored state**
.. in order to replay the last message (which is : sending the last state of that checkbox) and with some JS receive it _again_ in order to re-set the state of that checkbox with ng-model
**Example Flow:**
```auto
[{"id":"835ec4de2012a71d","type":"ui_template","z":"5847b7aa62131d37","group":"62350f50d4b09ff8","name":"Button1","order":6,"width":0,"height":0,"format":"\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":1440,"wires":[["2e161faa8308e46a"]]},{"id":"2e161faa8308e46a","type":"debug","z":"5847b7aa62131d37","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":655,"y":1440,"wires":[],"l":false},{"id":"f5bfe28dbe6e9d9d","type":"ui_template","z":"5847b7aa62131d37","group":"91752fb80be218c7","name":"Button2","order":1,"width":0,"height":0,"format":"\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":1540,"wires":[["2dbd6171620df0b8"]]},{"id":"2dbd6171620df0b8","type":"debug","z":"5847b7aa62131d37","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":655,"y":1540,"wires":[],"l":false},{"id":"4330561661ce3237","type":"ui_template","z":"5847b7aa62131d37","group":"0031f3d7a634831f","name":"Button3","order":6,"width":0,"height":0,"format":"\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":1640,"wires":[["f798b0d5b9f30dfd"]]},{"id":"f798b0d5b9f30dfd","type":"debug","z":"5847b7aa62131d37","name":"3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":655,"y":1640,"wires":[],"l":false},{"id":"62350f50d4b09ff8","type":"ui_group","name":"Group1","tab":"554e77d51ad13f2d","order":1,"disp":false,"width":"11","collapse":false,"className":""},{"id":"91752fb80be218c7","type":"ui_group","name":"Group2","tab":"a6b592813baacd83","order":1,"disp":false,"width":"5","collapse":false,"className":""},{"id":"0031f3d7a634831f","type":"ui_group","name":"Group3","tab":"981cecffacccfcf7","order":1,"disp":true,"width":"9","collapse":false,"className":""},{"id":"554e77d51ad13f2d","type":"ui_tab","name":"Tab1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"a6b592813baacd83","type":"ui_tab","name":"Tab2","icon":"dashboard","order":5,"disabled":false,"hidden":false},{"id":"981cecffacccfcf7","type":"ui_tab","name":"Tab3","icon":"dashboard","order":6,"disabled":false,"hidden":false}]
```
ps. open your Browser's Dev Tools to see the `console.log` of the message replay when its caught in `scope.$watch`
---