Hello Folks,
I am a rookie in Node-Red. I hope someone can help me with my problem.
What I need:
One form (Name, Surname) which a person will fil out, than click on 'Submit'-Button. The next page should show the full name (or the data which was submitted). It also should be written to a database.
I have two forms here and non of them I can make run. I do not knwo how pass the filled data through to the next node. (Its a part of my school project)
Would be very greatful if someone could help.
Thank you in advance.
[{"id":"86677cb9.83f88","type":"http in","z":"d9483cfb.da72d","name":"","url":"/website","method":"get","upload":false,"swaggerDoc":"","x":110,"y":140,"wires":[["23e52632.e259da"]]},{"id":"bc815854.325118","type":"http in","z":"d9483cfb.da72d","name":"","url":"/website","method":"post","upload":false,"swaggerDoc":"","x":120,"y":360,"wires":[["2d5e1565.46eb5a","c24bd892.c0c858"]]},{"id":"23e52632.e259da","type":"function","z":"d9483cfb.da72d","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"x":320,"y":140,"wires":[["204545b8.e11b3a"]]},{"id":"2d5e1565.46eb5a","type":"debug","z":"d9483cfb.da72d","name":"mysitepost","active":true,"console":"false","complete":"payload","x":350,"y":360,"wires":[]},{"id":"d28c4db8.9c672","type":"http response","z":"d9483cfb.da72d","name":"","x":810,"y":300,"wires":[]},{"id":"1212f3dc.6f96bc","type":"template","z":"d9483cfb.da72d","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[type=text], select {\n width: 100%;\n padding: 12px 20px;\n margin: 8px 0;\n display: inline-block;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n}\n\ninput[type=submit] {\n width: 100%;\n background-color: #4CAF50;\n color: white;\n padding: 14px 20px;\n margin: 8px 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\ninput[type=submit]:hover {\n background-color: #45a049;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}","x":630,"y":200,"wires":[["119f654d.cd7feb"]]},{"id":"58c7a731.5a2a88","type":"http response","z":"d9483cfb.da72d","name":"","x":990,"y":60,"wires":[]},{"id":"4febede7.0d47b4","type":"function","z":"d9483cfb.da72d","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":560,"y":300,"wires":[["d28c4db8.9c672"]]},{"id":"c24bd892.c0c858","type":"json","z":"d9483cfb.da72d","name":"","property":"payload","action":"","pretty":false,"x":310,"y":300,"wires":[["4febede7.0d47b4"]]},{"id":"8e5754ba.36e758","type":"function","z":"d9483cfb.da72d","name":"WRITE INTO DATABASE","func":"msg.topic = \"INSERT INTO `personen`.`namen` (`vorname`,`nachname`) VALUES ('\" + msg.payload + \"', '\" + msg.payload + \"')\";\nreturn msg;","outputs":1,"noerr":0,"x":950,"y":140,"wires":[["b453ac52.a62aa","3a31d4a.af34c2c"]]},{"id":"b453ac52.a62aa","type":"mysql","z":"d9483cfb.da72d","mydb":"1ce213b6.03eb4c","name":"DATABASE","x":1130,"y":240,"wires":[[]]},{"id":"3a31d4a.af34c2c","type":"debug","z":"d9483cfb.da72d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1200,"y":140,"wires":[]},{"id":"119f654d.cd7feb","type":"template","z":"d9483cfb.da72d","name":"HTML","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<div>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <label for=\"fname\">First Name</label>\n <input type=\"text\" id=\"fname\" name=\"firstname\">\n\n <label for=\"lname\">Last Name</label>\n <input type=\"text\" id=\"lname\" name=\"lastname\">\n\n <label for=\"country\">Country</label>\n <select id=\"country\" name=\"country\">\n <option value=\"uk\">United Kingdom</option>\n <option value=\"canada\">Canada</option>\n <option value=\"usa\">USA</option>\n </select>\n \n <input type=\"submit\" value=\"Submit\">\n </form>\n</div>\n<div>\n <span id=\"result\"></span>\n</div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>","x":750,"y":60,"wires":[["58c7a731.5a2a88","8e5754ba.36e758"]]},{"id":"204545b8.e11b3a","type":"template","z":"d9483cfb.da72d","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 $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});","x":510,"y":80,"wires":[["1212f3dc.6f96bc"]]},{"id":"25c3d208.4fefbe","type":"http in","z":"d9483cfb.da72d","name":"[get] /entervalues","url":"/entervalues","method":"get","upload":false,"swaggerDoc":"","x":180,"y":560,"wires":[["e3183a39.85d998"]]},{"id":"43519c49.b8afe4","type":"http response","z":"d9483cfb.da72d","name":"Show values","statusCode":"","headers":{"content-type":"text/html"},"x":750,"y":560,"wires":[]},{"id":"61af120f.192f1c","type":"http in","z":"d9483cfb.da72d","name":"[post] /entervalues","url":"/entervalues","method":"post","upload":false,"swaggerDoc":"","x":150,"y":680,"wires":[["d2623a0a.bc0db8"]]},{"id":"4833dad6.525804","type":"template","z":"d9483cfb.da72d","name":"thanks","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html> \n <head>\n </head>\n <body>\n {{payload.result}}\n <h1>Project registered!</h1>\n <p>The DATA was saved in database:</p>\n </body>\n</html> ","output":"str","x":770,"y":680,"wires":[["140cc52.b6dfd3b"]]},{"id":"140cc52.b6dfd3b","type":"http response","z":"d9483cfb.da72d","name":"","statusCode":"","headers":{},"x":910,"y":680,"wires":[]},{"id":"feecf16f.4099b","type":"mysql","z":"d9483cfb.da72d","mydb":"95281047.3d569","name":"DATABASE","x":590,"y":760,"wires":[[]]},{"id":"e3183a39.85d998","type":"template","z":"d9483cfb.da72d","name":"Basic Html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head></head>\n <body>\n \n \n <div id=\"idhello\"><span id=\"idnameout\"></span></div>\n <form id=\"idform\" action=\"/entervalues\" method=\"post\">\n <div>\n <span>\n <input type=\"text\" name1=\"var1\" id=\"var1\" />\n </span>\n <span>\n <input type=\"text\" name2=\"var2\" id=\"var2\" />\n </span>\n <span>\n <input type=\"submit\" value=\"Submit\" id=\"idsubmit\" />\n </span>\n </div>\n </form>\n <script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\">\n </script>\n <script type=\"text/javascript\">\n $(document).ready(function() {\n $('#idhello').hide();\n $('#idform').submit(onSubmitClicked);\n });\n \n function onSubmitClicked(event){\n $('#idnameout').text($('#var1').val())\n $('#idnameout').text($('#var2').val())\n $('#idhello').show();\n $('idform').hide();\n }\n </script>\n </body>\n </html>\n","output":"str","x":390,"y":560,"wires":[["43519c49.b8afe4"]]},{"id":"343d5c54.5ef624","type":"function","z":"d9483cfb.da72d","name":"vars","func":"var var1 = msg.payload.var1;\nvar var2 = msg.payload.var2;\n\nmsg.topic = \"INSERT INTO `personen`.`namen` (`vorname`, `nachname`) VALUES ('\" + var1 + \"', '\" + var2 + \"')\";\n\nreturn msg;","outputs":1,"noerr":0,"x":570,"y":680,"wires":[["4833dad6.525804","feecf16f.4099b"]]},{"id":"d2623a0a.bc0db8","type":"change","z":"d9483cfb.da72d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.name","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":680,"wires":[["343d5c54.5ef624"]]},{"id":"316c9591.61f25a","type":"comment","z":"d9483cfb.da72d","name":"FORM 1","info":"","x":90,"y":60,"wires":[]},{"id":"6f6c72.2baaf39","type":"comment","z":"d9483cfb.da72d","name":"FORM 2","info":"","x":120,"y":480,"wires":[]},{"id":"1ce213b6.03eb4c","type":"MySQLdatabase","z":"","host":"127.0.0.1","port":"3306","db":"personen","tz":""},{"id":"95281047.3d569","type":"MySQLdatabase","z":"","host":"127.0.0.1","port":"3306","db":"zeiterfassung","tz":""}]
