# Html to html get information

**URL:** <https://discourse.nodered.org/t/html-to-html-get-information/54232>\
**Category:** General\
**Created:** [24 November 2021 22:16 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232 "2021-11-24T22:16:51Z")\
**Posts on this page:** 8\
**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:** [24 November 2021 22:16 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/1 "2021-11-24T22:16:52Z")

</div>

Good evening,  
i've created a project and it works perfectly.  
I use Node RED version:V2.1.1 and Node.js version:v14.18.1  
Now i have a little problem: i have to html page, each one with a html table, in the table there is a button. I need to send a get information like "127.0.0.1:1880/viewdata?id=25" to the next page.  
How can i send it? I i'm able to get this information in the landing page, but i don't understand how to send "?id=25" by the button.  
Please help me!

 ![Schermata 2021-11-24 alle 23.14.32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e13500c5d99701879a6f3d75effec20dcdbec9f1.png)  
 ![Schermata 2021-11-24 alle 23.14.45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3e299b9b334c71d40a01fe6fbe72ed993d657a76.png)

This is my flow:

```auto
[{"id":"6641db45d9c67d86","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"845cdb63bcd7bebe","type":"http in","z":"6641db45d9c67d86","name":"","url":"/viewdata","method":"get","upload":false,"swaggerDoc":"","x":160,"y":240,"wires":[["fcfebd2528032613"]]},{"id":"852ac9a43b6d4bc7","type":"mysql","z":"6641db45d9c67d86","mydb":"7787d27d4bcc22dd","name":"Database","x":380,"y":360,"wires":[["78d885ea34169813"]]},{"id":"febd4ba4457cdbc5","type":"template","z":"6641db45d9c67d86","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n <title>Pod_Manager</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<table id=\"table\">\n <tr>\n <th>Prod Id</th>\n <th>Descrizione</th>\n <th>Ordine</th>\n <th>Q.tà</th>\n <th></th>\n </tr>\n {{#payload}}\n <tr class = \"start\">\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 onclick=\"e()\" id=\"{{id_prod}}\">Inizio</button>\n </form>\n </td>\n </tr>\n {{/payload}}\n</table>\n\n</body>\n</html>\n<script>{{{payload.scriptdue}}}</script>\n<script>{{{payload.script}}}</script>","output":"str","x":1120,"y":360,"wires":[["a50ef9a245b80de1"]]},{"id":"a50ef9a245b80de1","type":"http response","z":"6641db45d9c67d86","name":"","statusCode":"","headers":{},"x":1290,"y":320,"wires":[]},{"id":"fcfebd2528032613","type":"function","z":"6641db45d9c67d86","name":"Get data from DB","func":"var id = msg.payload.id;\nmsg.topic = \"SELECT * FROM OrdineProdotto\";\nmsg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":170,"y":360,"wires":[["852ac9a43b6d4bc7"]]},{"id":"e034f62bbc69f7ad","type":"template","z":"6641db45d9c67d86","name":"CSS","field":"payload.style","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"table {\nwidth: 100%;\n}\n\ntable, td {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n border: 1px solid black;\n border-collapse: collapse;\n}\ntd {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n padding: 15px;\n text-align: left;\n}\nth {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n background-color: black;\n color: white;\n padding: 15px;\n text-align: left;\n}\n.selected {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n background-color: brown;\n color: #FFF;","output":"str","x":950,"y":360,"wires":[["febd4ba4457cdbc5"]]},{"id":"1df04eaf2b63827d","type":"template","z":"6641db45d9c67d86","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});","x":790,"y":360,"wires":[["e034f62bbc69f7ad"]]},{"id":"78d885ea34169813","type":"template","z":"6641db45d9c67d86","name":"Pulsante","field":"payload.scriptdue","fieldType":"msg","format":"javascript","syntax":"mustache","template":"$(\"#table tr\").on('click', function(e){\n $(this).addClass('selected').siblings().removeClass('selected'); \n var value=$(this).find('td:first').html();\n var x = \"Fine\";\n document.getElementById(value).innerHTML = x;\n});","output":"str","x":580,"y":360,"wires":[["1df04eaf2b63827d"]]},{"id":"15744c791ea36182","type":"http in","z":"6641db45d9c67d86","name":"","url":"/orders","method":"get","upload":false,"swaggerDoc":"","x":150,"y":80,"wires":[["25253a82fdce1ea7"]]},{"id":"25253a82fdce1ea7","type":"function","z":"6641db45d9c67d86","name":"Get data from DB","func":"msg.topic = \"SELECT * FROM `TaglioPlasma` WHERE `Stato` = 1\";\nmsg.url = \"viewdata\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":80,"wires":[["c5e86bd5c11809ba"]]},{"id":"c5e86bd5c11809ba","type":"mysql","z":"6641db45d9c67d86","mydb":"7787d27d4bcc22dd","name":"Database","x":620,"y":80,"wires":[["e7afb7614cd132e6"]]},{"id":"e7afb7614cd132e6","type":"template","z":"6641db45d9c67d86","name":"CSS","field":"payload.style","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"table {\nwidth: 100%;\n}\n\ntable, td {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n border: 1px solid black;\n border-collapse: collapse;\n}\ntd {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n padding: 15px;\n text-align: left;\n}\nth {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n background-color: black;\n color: white;\n padding: 15px;\n text-align: left;\n}\n.selected {\n font-family: \"Lucida Console\", \"Courier New\", monospace;\n background-color: brown;\n color: #FFF;","output":"str","x":790,"y":80,"wires":[["3ee834399d7aae8c"]]},{"id":"3ee834399d7aae8c","type":"template","z":"6641db45d9c67d86","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n <title>Pod_Manager - Tagli in corso</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<table id=\"table\">\n <tr>\n <th>Data Taglio</th>\n <th>Codice Taglio</th>\n <th>Pezzi</th>\n <th></th>\n </tr>\n {{#payload}}\n <tr class = \"start\">\n <td>{{DataTaglio}}</td>\n <td>{{CodiceTaglio}}</td>\n <td>{{NumProd}}</td>\n <td>\n <form method=\"get\" action=\"/{{url}}\" ajax=\"false\">\n <button onclick=\"showUser(id)\" id=\"{{CodiceTaglio}}\">Vai</button>\n </form>\n </td>\n </tr>\n {{/payload}}\n</table>\n\n</body>\n</html>\n<script>{{{payload.scriptdue}}}</script>\n<script>{{{payload.script}}}</script>","output":"str","x":960,"y":80,"wires":[["f6a0a417fc96bf9b"]]},{"id":"f6a0a417fc96bf9b","type":"http response","z":"6641db45d9c67d86","name":"","statusCode":"","headers":{},"x":1160,"y":80,"wires":[]},{"id":"7787d27d4bcc22dd","type":"MySQLdatabase","name":"","host":"xxxxx","port":"xxxx","db":"xxxxx","tz":"","charset":"UTF8"}]

```

---

<div class="post-metadata">

**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:** [24 November 2021 22:33 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/2 "2021-11-24T22:33:07Z")

</div>

Looking at your flow, you actually have 2 routes (end points) serving HTML so a button is not the right thing here - you simply want a hyperlink the redirects the browser to `/viewdata`

Attach a debug node to the 2nd http-in node like this...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/12780bae3782492db4985759787592af156e03c3.png)  
..then you will see the `id` in `msg.req.query` as is explained in the built in help...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7bee6ac91413e0828839c4e0489c883d2b7d1ec3.png)

You can then use `msg.req.query.id` in your function node to build the required SQL.

---

<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:** [24 November 2021 22:46 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/3 "2021-11-24T22:46:43Z")

</div>

Thank you Steve-Mcl but i'm really new in node red and i need more help.  
I tried your suggestion but my msg.req.query.id is empty, and furthermore i don't know what i have to do with it.  
If i don't press a button, how can i send the correct information to the next page?

 ![Schermata 2021-11-24 alle 23.46.02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0ef1fea51d733cd117ebcc19fbb53574137421e6.png)

Thank you so much for your help!

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [25 November 2021 11:04 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/4 "2021-11-25T11:04:13Z")

</div>

There is an example in the Cookbook of how to handle url parameters  
i believe your http-in url should be `/viewdata/:id`

[https://cookbook.nodered.org/http/handle-url-parameters](https://cookbook.nodered.org/http/handle-url-parameters)

and here's one with query parameters

[https://cookbook.nodered.org/http/handle-query-parameters](https://cookbook.nodered.org/http/handle-query-parameters)

* * *

For me it works  
visiting `/viewdata?a=11&b=22`  
the query parameters are received in the request  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99195714a31e8dcc4c3946e4ad4fdd3c558cf0cc.png)

so there must be something wrong with your html

---

<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:** [25 November 2021 15:24 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/5 "2021-11-25T15:24:16Z")

</div>

Hi and thank you for your answers.  
Maybe i don't understand perfectly but i'm able to handle the get response, my real problem is how to send this value when i push the button. How can i send a value like this "/viewdata?a=11" ?

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [25 November 2021 18:06 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/6 "2021-11-25T18:06:20Z")

</div>

> [@danieleronchi](#):
>
> How can i send a value like this "/viewdata?a=11" ?

we dont have your database and its impossible to know how the mustache syntax runs  
but if i had to guess

```auto
<button onclick="window.location.href='/viewdata?id={{CodiceTaglio}}';">

```

---

<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:** [25 November 2021 20:37 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/7 "2021-11-25T20:37:09Z")

</div>

OMG! Thank you! This is exactly what i needed!

---

<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:** [9 December 2021 20:37 UTC](https://discourse.nodered.org/t/html-to-html-get-information/54232/8 "2021-12-09T20:37:21Z")

</div>

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