How can i check the checkbox with javascript and send the cell's what are highlighted?

Ihave a small example where i can with MouseOver/Down select table cells.
Now i want the information wich cells are higlighted.

Call:
http://node-red-IP:1880/mysite

Is this possible that i check the checkboxes?
At the end i wanna make the input field not visible.

and my next question is how can i insert this page direct into the Dashboard?

here is my flow:

[{"id":"2bd58fd138a1157e","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"ce26f02687ebfd99","type":"http in","z":"2bd58fd138a1157e","name":"","url":"/mysite","method":"get","swaggerDoc":"","x":230,"y":240,"wires":[["76124fef0feca833"]]},{"id":"b22283647ae789a7","type":"http in","z":"2bd58fd138a1157e","name":"","url":"/mysitepost","method":"post","swaggerDoc":"","x":250,"y":440,"wires":[["5ced15da7ee3e926","0b591c3ac2f5dd77"]]},{"id":"76124fef0feca833","type":"function","z":"2bd58fd138a1157e","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"x":470,"y":240,"wires":[["837c29637f66cc20"]]},{"id":"5ced15da7ee3e926","type":"debug","z":"2bd58fd138a1157e","name":"mysitepost","active":true,"console":"false","complete":"payload","x":890,"y":440,"wires":[]},{"id":"08309480af7fb815","type":"http response","z":"2bd58fd138a1157e","name":"","x":910,"y":400,"wires":[]},{"id":"ef842b339380fcc9","type":"template","z":"2bd58fd138a1157e","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[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\ninput[type=\"checkbox\"] {\n//display: none;\n}\n\ndiv {\n    border-radius: 5px;\n    background-color: #f2f2f2;\n    padding: 20px;\n}\n\ntable td {\nwidth:100px;\nheight:100px;\ntext-align:center;\nvertical-align:middle;\nbackground-color:#ccc;\nborder:1px solid #fff;\n}\n\ntable td.highlighted {\nbackground-color:#999;\n}","x":630,"y":340,"wires":[["348756352e2067ab"]]},{"id":"837c29637f66cc20","type":"template","z":"2bd58fd138a1157e","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$(function () {\n    var isMouseDown = false,\n        isHighlighted;\n    $(\"#our_table td\")\n        .mousedown(function () {\n            isMouseDown = true;\n            $(this).toggleClass(\"highlighted\");\n            isHighlighted = $(this).hasClass(\"highlighted\");\n            return false; \n        })\n        .mouseover(function () {\n            if (isMouseDown) {\n                $(this).toggleClass(\"highlighted\", isHighlighted);\n            }\n        })\n        .bind(\"selectstart\", function () {\n            return false;\n        })\n\n    $(document)\n        .mouseup(function () {\n            isMouseDown = false;\n        });\n});","x":470,"y":340,"wires":[["ef842b339380fcc9"]]},{"id":"880766bc0dd7edf0","type":"http response","z":"2bd58fd138a1157e","name":"","x":910,"y":340,"wires":[]},{"id":"348756352e2067ab","type":"template","z":"2bd58fd138a1157e","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n  <head>\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<div>\n  <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n\n<table cellpadding=\"0\" cellspacing=\"0\" id=\"our_table\" border=\"1\">\n  <thead>\n    <tr>\n      <th width=\"50px\">-</th>\n      <th>1</th>\n      <th>2</th>\n      <th>3</th>\n    </tr>\n  </thead>\n  <tbody>\n  <tr>\n    <th>A</th>\n    <td><input type=\"checkbox\" name=\"a_1\" value=\"a 1\">a 1</td>\n    <td><input type=\"checkbox\" name=\"a_2\" value=\"a 2\">a 2</td>\n    <td><input type=\"checkbox\" name=\"a_3\" value=\"a 2\">a 3</td>\n  </tr>\n  <tr>\n    <th>B</th>\n    <td><input type=\"checkbox\" name=\"b_1\" value=\"b 1\">b 1</td>\n    <td><input type=\"checkbox\" name=\"b_2\" value=\"b 2\">b 2</td>\n    <td><input type=\"checkbox\" name=\"b_3\" value=\"b 2\">b 3</td>\n  </tr>\n  <tr>\n    <th>C</th>\n    <td><input type=\"checkbox\" name=\"c_1\" value=\"c 1\">c 1</td>\n    <td><input type=\"checkbox\" name=\"c_2\" value=\"c 2\">c 2</td>\n    <td><input type=\"checkbox\" name=\"c_3\" value=\"c 2\">c 3</td>\n  </tr>\n  </tbody>\n</table>\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":770,"y":340,"wires":[["880766bc0dd7edf0"]]},{"id":"9f483d5a874507b0","type":"function","z":"2bd58fd138a1157e","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":640,"y":400,"wires":[["08309480af7fb815"]]},{"id":"31a44fa39641ce6c","type":"comment","z":"2bd58fd138a1157e","name":"Inject msg object properties","info":"","x":440,"y":200,"wires":[]},{"id":"0b591c3ac2f5dd77","type":"json","z":"2bd58fd138a1157e","name":"","x":450,"y":400,"wires":[["9f483d5a874507b0"]]},{"id":"8b8d8d78ec4ac3d0","type":"comment","z":"2bd58fd138a1157e","name":"Website","info":"","x":210,"y":160,"wires":[]},{"id":"239a876ea0698802","type":"comment","z":"2bd58fd138a1157e","name":"Form Submission","info":"","x":240,"y":380,"wires":[]}]

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