Html to html get information

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!


This is my flow:

[{"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"}]

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
..then you will see the id in msg.req.query as is explained in the built in help...

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

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?

Thank you so much for your help!

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

and here's one with 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

so there must be something wrong with your html

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.

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

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

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

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