# Html change button name

**URL:** <https://discourse.nodered.org/t/html-change-button-name/53064>\
**Category:** General\
**Created:** [1 November 2021 11:39 UTC](https://discourse.nodered.org/t/html-change-button-name/53064 "2021-11-01T11:39:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![danieleronchi](https://avatars.discourse-cdn.com/v4/letter/d/9d8465/32.png) [@danieleronchi](https://discourse.nodered.org/u/danieleronchi)\
**Post date:** [1 November 2021 11:39 UTC](https://discourse.nodered.org/t/html-change-button-name/53064/1 "2021-11-01T11:39:50Z")

</div>

Goodmorning everyone,  
I recently found Node-Red and I think it's amazing!  
I created a little project with an html table that works perfectly.  
I use Node-RED version: v2.1.1 and Node.js version: v14.18.1  
Now I've a problem that I can't solve.  
In the table I have a button that write in my sql. The problem is that I'm not able to change the name and the color of this button after I pressed it, how can I do that? I tried with a java node, but it doesn't work at all.

Thank you!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [1 November 2021 12:20 UTC](https://discourse.nodered.org/t/html-change-button-name/53064/2 "2021-11-01T12:20:18Z")

</div>

Welcome to the forun Daniele.

First off, node-red uses JavaScript not Java, they are two different things.

It would be very helpful if you let us know what vrsion of Node-red and node.js you are using (you can get this from the startup log) and could export your flow and attach it to a reply so someone could actually see what you are doing. In order to make code more readable and importable it is important to surround your code with three backticks  
`````  
`like this`  
`````

You can edit and correct your post by clicking the pencil icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![danieleronchi](https://avatars.discourse-cdn.com/v4/letter/d/9d8465/32.png) [@danieleronchi](https://discourse.nodered.org/u/danieleronchi)\
**Post date:** [1 November 2021 13:47 UTC](https://discourse.nodered.org/t/html-change-button-name/53064/3 "2021-11-01T13:47:14Z")

</div>

This is my flow

```auto
[
    {
        "id": "ee0a9f786f8f120e",
        "type": "tab",
        "label": "Piegatrice",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "487d1012e8ec4b16",
        "type": "http in",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "url": "/viewdata",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 120,
        "y": 60,
        "wires": [
            [
                "c1cb5409b1f41a8c"
            ]
        ]
    },
    {
        "id": "6969a2d427c1d9fa",
        "type": "mysql",
        "z": "ee0a9f786f8f120e",
        "mydb": "7787d27d4bcc22dd",
        "name": "Database",
        "x": 340,
        "y": 180,
        "wires": [
            [
                "fd80931eaa432393"
            ]
        ]
    },
    {
        "id": "af9a89b66c75fa52",
        "type": "template",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<html>\n <head>\n <title>My Site</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n \n\n <h2>Using CSS to style an HTML form with AJAX POST and Node-RED</h2>\n <h4><a href=\"http://www.internetoflego.com\">Internet of LEGO</a></h4>\n\n<table>\n <tr>\n <th>Prod Id</th>\n <th>Descrizione</th>\n <th>Ordine</th>\n <th>Quantità</th>\n <th></th>\n <th></th>\n </tr>\n {{#payload}}\n <tr>\n <td>{{id_prod}}</td>\n <td>{{descript}}</td>\n <td>{{order_id}}</td>\n <td>{{quantita}}</td>\n <td>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <input type=\"text\" id=\"fname\" name=\"id\" hidden value={{id_prod}}>\n <button id=\"modifica\" type=\"submit\" value=\"1\" class=\"btn\" onclick=\"return changeText('submitbutton');\">Inizio</button>\n </form>\n </td>\n </tr>\n {{/payload}}\n</table>\n\n</body>\n</html>\n<script>{{{payload.script.due}}}</script>\n<script>{{{payload.script}}}</script>",
        "output": "str",
        "x": 1080,
        "y": 180,
        "wires": [
            [
                "742514667af4db55"
            ]
        ]
    },
    {
        "id": "742514667af4db55",
        "type": "http response",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 1250,
        "y": 180,
        "wires": []
    },
    {
        "id": "c1cb5409b1f41a8c",
        "type": "function",
        "z": "ee0a9f786f8f120e",
        "name": "Get data from DB",
        "func": "msg.topic = \"SELECT * FROM OrdineProdotto\";\nmsg.url = \"mysitepost\";\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 130,
        "y": 180,
        "wires": [
            [
                "6969a2d427c1d9fa"
            ]
        ]
    },
    {
        "id": "75c7dff9662b10bb",
        "type": "template",
        "z": "ee0a9f786f8f120e",
        "name": "CSS",
        "field": "payload.style",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "table {\nwidth: 100%;\n}\n\ntable, td {\n border: 1px solid red;\n border-collapse: collapse;\n}\ntd {\n padding: 15px;\n text-align: left;\n}\nth {\n background-color: black;\n color: white;\n padding: 15px;\n text-align: left;\n}",
        "output": "str",
        "x": 910,
        "y": 180,
        "wires": [
            [
                "af9a89b66c75fa52"
            ]
        ]
    },
    {
        "id": "e22da544cdfe09ae",
        "type": "template",
        "z": "ee0a9f786f8f120e",
        "name": "JavaScript",
        "field": "payload.script",
        "fieldType": "msg",
        "format": "javascript",
        "syntax": "plain",
        "template": "$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\n \n $(\"#loadingimg\").show();\n \n $.ajax({\n url: form_url, \n type: form_method, \n data: form_data, \n cache: false,\n success: function(returnhtml){ \n $(\"#modifica\").html('Fine');\n $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});",
        "x": 750,
        "y": 180,
        "wires": [
            [
                "75c7dff9662b10bb"
            ]
        ]
    },
    {
        "id": "ddbd387870adc47d",
        "type": "http in",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "url": "/mysitepost",
        "method": "post",
        "upload": false,
        "swaggerDoc": "",
        "x": 130,
        "y": 260,
        "wires": [
            [
                "418926dd11aa642a"
            ]
        ]
    },
    {
        "id": "189b86da2a260718",
        "type": "function",
        "z": "ee0a9f786f8f120e",
        "name": "Inserisco Fine",
        "func": "var id = msg.payload.id;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"UPDATE `Industria` SET `fine`= NOW() WHERE `prodId` = \"+id+\"\";\n return msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 360,
        "wires": [
            [
                "16e12fd289943f47"
            ]
        ]
    },
    {
        "id": "16e12fd289943f47",
        "type": "mysql",
        "z": "ee0a9f786f8f120e",
        "mydb": "7787d27d4bcc22dd",
        "name": "",
        "x": 920,
        "y": 360,
        "wires": [
            [
                "205dc60f583af9ce"
            ]
        ]
    },
    {
        "id": "052d53a1e372c4fd",
        "type": "function",
        "z": "ee0a9f786f8f120e",
        "name": "Cerco Immagine",
        "func": "var id = msg.payload.id;\nif (msg.payload.m == 1 ){\nmsg.topic =\"SELECT `img` FROM `OrdineProdotto` WHERE `id_prod` = \"+id+\"\";\nreturn msg;\n}\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 840,
        "y": 660,
        "wires": [
            [
                "c8fa69b587468df2"
            ]
        ]
    },
    {
        "id": "c8fa69b587468df2",
        "type": "mysql",
        "z": "ee0a9f786f8f120e",
        "mydb": "7787d27d4bcc22dd",
        "name": "",
        "x": 1040,
        "y": 660,
        "wires": [
            [
                "42c70c803e229a55"
            ]
        ]
    },
    {
        "id": "42c70c803e229a55",
        "type": "switch",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "property": "payload[0].img",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "2A",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "1",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 1230,
        "y": 660,
        "wires": [
            [
                "ab197c035a3d21c7"
            ],
            [
                "e8697811ecf652b3"
            ]
        ]
    },
    {
        "id": "ab197c035a3d21c7",
        "type": "debug",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1430,
        "y": 620,
        "wires": []
    },
    {
        "id": "e8697811ecf652b3",
        "type": "debug",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1430,
        "y": 700,
        "wires": []
    },
    {
        "id": "359058415499e68c",
        "type": "comment",
        "z": "ee0a9f786f8f120e",
        "name": "Tipo Piega",
        "info": "",
        "x": 1420,
        "y": 580,
        "wires": []
    },
    {
        "id": "d5fe7b9b2d9cdbc4",
        "type": "change",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "global",
                "to": "payload.id",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 390,
        "y": 420,
        "wires": [
            [
                "0d19638842eb8b9b"
            ]
        ]
    },
    {
        "id": "418926dd11aa642a",
        "type": "switch",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "property": "payload",
        "propertyType": "global",
        "rules": [
            {
                "t": "eq",
                "v": "payload.id",
                "vt": "msg"
            },
            {
                "t": "istype",
                "v": "undefined",
                "vt": "undefined"
            },
            {
                "t": "else"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 3,
        "x": 140,
        "y": 420,
        "wires": [
            [
                "189b86da2a260718"
            ],
            [
                "d5fe7b9b2d9cdbc4"
            ],
            [
                "7fa50ab83423609c"
            ]
        ]
    },
    {
        "id": "bab901e37393d314",
        "type": "function",
        "z": "ee0a9f786f8f120e",
        "name": "Inserisco Fine",
        "func": "var id = msg.payload.idtwo;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"UPDATE `Industria` SET `fine`= NOW() WHERE `prodId` = \"+id+\"\";;\n return msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 600,
        "y": 480,
        "wires": [
            [
                "4bdf6718fea28b3c",
                "16e12fd289943f47"
            ]
        ]
    },
    {
        "id": "205dc60f583af9ce",
        "type": "debug",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1130,
        "y": 360,
        "wires": []
    },
    {
        "id": "0d19638842eb8b9b",
        "type": "function",
        "z": "ee0a9f786f8f120e",
        "name": "Inserisco Inizio",
        "func": "var id = msg.payload.id;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"INSERT INTO `Industria`(`prodId`, `inizio`) VALUES (\"+id+\",NOW())\";\n return msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 600,
        "y": 420,
        "wires": [
            [
                "16e12fd289943f47",
                "052d53a1e372c4fd"
            ]
        ]
    },
    {
        "id": "4bdf6718fea28b3c",
        "type": "change",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "global",
                "to": "payload.id",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 850,
        "y": 480,
        "wires": [
            [
                "9c6cfbc0b798a88b"
            ]
        ]
    },
    {
        "id": "7fa50ab83423609c",
        "type": "change",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload.idtwo",
                "pt": "msg",
                "to": "payload",
                "tot": "global"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 400,
        "y": 480,
        "wires": [
            [
                "bab901e37393d314"
            ]
        ]
    },
    {
        "id": "817bf98e1b6829cc",
        "type": "function",
        "z": "ee0a9f786f8f120e",
        "name": "Inserisco Inizio",
        "func": "var id = msg.payload.id;\nvar date = msg.time = new Date().toLocaleString();\n msg.topic =\"INSERT INTO `Industria`(`prodId`, `inizio`) VALUES (\"+id+\",NOW())\";\n return msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1080,
        "y": 480,
        "wires": [
            [
                "16e12fd289943f47"
            ]
        ]
    },
    {
        "id": "9c6cfbc0b798a88b",
        "type": "change",
        "z": "ee0a9f786f8f120e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload.id",
                "pt": "msg",
                "to": "payload",
                "tot": "global"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 850,
        "y": 520,
        "wires": [
            [
                "817bf98e1b6829cc"
            ]
        ]
    },
    {
        "id": "fd80931eaa432393",
        "type": "template",
        "z": "ee0a9f786f8f120e",
        "name": "Pulsante",
        "field": "payload.script.due",
        "fieldType": "msg",
        "format": "javascript",
        "syntax": "mustache",
        "template": " function changeText(submitId){\n var submit = document.getElementById(submitId);\n submit.value = 'Loading...';\n return false;\n };",
        "output": "str",
        "x": 540,
        "y": 180,
        "wires": [
            [
                "e22da544cdfe09ae"
            ]
        ]
    },
    {
        "id": "7787d27d4bcc22dd",
        "type": "MySQLdatabase",
        "name": "",
        "host": "ra266794-002.dbaas.ovh.net",
        "port": "35737",
        "db": "db_pod",
        "tz": "",
        "charset": "UTF8"
    }
]

```

---

<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:** [31 December 2021 13:48 UTC](https://discourse.nodered.org/t/html-change-button-name/53064/4 "2021-12-31T13:48:09Z")

</div>

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