# Append payload to textarea element in open template/WebPage **URL:** https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715 **Category:** General **Created:** [15 June 2024 12:33 UTC](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715 "2024-06-15T12:33:48Z") **Posts on this page:** 5 **Page:** 1
### Author: ![Tany](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tany](https://discourse.nodered.org/u/Tany) #### Post date: [15 June 2024 12:33 UTC](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715/1 "2024-06-15T12:33:48Z")
if the WebPage is called with "/webserialTest?ESPIP=192.168.0.5" and open, - how to refresh automatically at receipt of a payload from an MQTT IN (or in the exemple from an Inject) - how to add/append the payload to the textarea element id="serialOutput" of the WebPage ```auto [ { "id": "2db16cc512a1eea6", "type": "tab", "label": "Flow 1", "disabled": false, "info": "", "env": [] }, { "id": "34d8eca15e7cec65", "type": "template", "z": "2db16cc512a1eea6", "name": "HTML", "field": "payload", "fieldType": "msg", "format": "handlebars", "syntax": "mustache", "template": "\n\n NodeRed WebPage\n \n \n ESP32 Serial Monitor\n \n\n\n\n\n\n
\n

ESP32 WebSerial Monitor

\n
\n\n

Return ...... : Home Control

\n

Return ...... : ESP Set up


\n\n

\n\n \n \n

...0: No Serial, 1: Serial Monitor, 2: WebSerial

\n

...C: Clear output

\n\n\n \n \n\n\n", "output": "str", "x": 650, "y": 140, "wires": [ [ "b813a0a187b74073" ] ] }, { "id": "578a752513284892", "type": "http in", "z": "2db16cc512a1eea6", "name": "", "url": "/webserialTest", "method": "get", "upload": false, "swaggerDoc": "", "x": 150, "y": 140, "wires": [ [ "1881c5d0437ef961" ] ] }, { "id": "1881c5d0437ef961", "type": "change", "z": "2db16cc512a1eea6", "name": "set globals", "rules": [ { "t": "set", "p": "WebSerial_ESPIP", "pt": "global", "to": "payload.ESPIP", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 370, "y": 140, "wires": [ [ "34d8eca15e7cec65" ] ] }, { "id": "b813a0a187b74073", "type": "http response", "z": "2db16cc512a1eea6", "name": "", "statusCode": "", "headers": {}, "x": 810, "y": 140, "wires": [] }, { "id": "f54810bd7f204107", "type": "function", "z": "2db16cc512a1eea6", "name": "", "func": "//to be completed : publish to proper ESP\n\nvar pl = msg.payload;\npl = pl.newVal;\nmsg.payload = pl;\nreturn msg;", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 360, "y": 220, "wires": [ [ "ad5c33a9c7282915" ] ] }, { "id": "ad5c33a9c7282915", "type": "mqtt out", "z": "2db16cc512a1eea6", "name": "", "topic": "esp32/WebSerialSts", "qos": "", "retain": "", "respTopic": "", "contentType": "", "userProps": "", "correl": "", "expiry": "", "broker": "407a01e4.6b637", "x": 700, "y": 220, "wires": [] }, { "id": "2b63344ff190b039", "type": "http in", "z": "2db16cc512a1eea6", "name": "", "url": "/WebSerialPost", "method": "post", "upload": false, "swaggerDoc": "", "x": 160, "y": 220, "wires": [ [ "f54810bd7f204107" ] ] }, { "id": "a60f5d2f3a4146d8", "type": "function", "z": "2db16cc512a1eea6", "name": "function 4", "func": "// to be completed : split originator, time, msg...\n\n\nreturn msg;", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 360, "y": 300, "wires": [ [ "34d8eca15e7cec65", "08e40401717a1f28" ] ] }, { "id": "b0e1f46f8c9c2f11", "type": "mqtt in", "z": "2db16cc512a1eea6", "name": "", "topic": "esp32/WebSerialMsg", "qos": "2", "datatype": "auto-detect", "broker": "407a01e4.6b637", "nl": false, "rap": true, "rh": 0, "inputs": 0, "x": 160, "y": 300, "wires": [ [ "a60f5d2f3a4146d8" ] ], "info": "Bentel will activate a contactor when in mode \"Awake and Up\". This contactor is connected to 05_ESP32 pin 31.\n05_ESP32 will MQTT-publish to topic \"05_esp32/stateBentel\".\nNR will MQTT-publish \"on\" to topic 08_esp32/FOSCAM\n08_ESP32 will MQTT-subscribe to NR topic 08_esp32/FOSCAM, and set Relais 1 and switch the CAM off. " }, { "id": "485726a8968ee836", "type": "inject", "z": "2db16cc512a1eea6", "name": "Log 1 qdfqery", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "Log 1 qdfqery", "payloadType": "str", "x": 210, "y": 360, "wires": [ [ "a60f5d2f3a4146d8" ] ] }, { "id": "21ba2788d01a1d23", "type": "inject", "z": "2db16cc512a1eea6", "name": "Log123 ldldldldldldldl", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "Log123 ldldldldldldldl", "payloadType": "str", "x": 230, "y": 420, "wires": [ [ "a60f5d2f3a4146d8" ] ] }, { "id": "08e40401717a1f28", "type": "debug", "z": "2db16cc512a1eea6", "name": "debug 133", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "statusVal": "", "statusType": "auto", "x": 670, "y": 300, "wires": [] }, { "id": "407a01e4.6b637", "type": "mqtt-broker", "name": "", "broker": "localhost", "port": "1883", "clientid": "", "autoConnect": true, "usetls": false, "protocolVersion": "4", "keepalive": "60", "cleansession": true, "birthTopic": "", "birthQos": "0", "birthPayload": "", "birthMsg": {}, "closeTopic": "", "closePayload": "", "closeMsg": {}, "willTopic": "", "willQos": "0", "willPayload": "", "willMsg": {}, "sessionExpiry": "" } ] ``` ---
### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl) #### Post date: [15 June 2024 12:44 UTC](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715/2 "2024-06-15T12:44:45Z")
This would be super simple if you used dashboard but since you are creating your own page, you will need to setup and handle intercommunication via websocket or polling an endpoint from the web page or some other means. ---
### 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: [15 June 2024 13:46 UTC](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715/3 "2024-06-15T13:46:58Z")
This example flow should help you can send message between node-red and browser running a web page, it also shows how to update element by id [Simple Web page with live data updates via websocket (flow) - Node-RED](https://flows.nodered.org/flow/8666510f94ad422e4765) ---
### Author: ![Tany](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tany](https://discourse.nodered.org/u/Tany) #### Post date: [15 June 2024 16:48 UTC](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715/4 "2024-06-15T16:48:36Z")
I checked this one out, and it fits a simple mind. 🙂 This will do the job. Thank You T ---
### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system) #### Post date: [29 June 2024 16:49 UTC](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715/5 "2024-06-29T16:49:10Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.