I have been trying to get a simple form with a radio button to update with a variable that I set when the choice is made. When I refresh the web page the radio button defaults back to no selection. I am sure that I am making a fundamental mistake with my jQuery code. Hopefully you can spot it easily.
Thank you in advance
[
{
"id": "118529fddad7cc43",
"type": "debug",
"z": "c63e5607e59a6b15",
"name": "debug 11",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 920,
"y": 380,
"wires": []
},
{
"id": "784babeb16609a41",
"type": "ui_template",
"z": "c63e5607e59a6b15",
"group": "53cf504.e9555b",
"name": "",
"order": 6,
"width": "6",
"height": "6",
"format": "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n<script>\n this.scope.action = function(opt) {\n var splitString = opt.split(\"\"); \n return opt; } \n</script>\n<script>\nvar choice = flow.get(\"choice\");\n<script>\n<script type=\"text/javascript\">\nnode.status({ text: \"choice\" + choice }); //used for debug\n document.addEventListener('DOMContentLoaded', function() {\n $('input[type=radio][name=\"data\"]').change(function() {\n if (choice === \"Kilometer\"){\n var $radiobutton = $(\"input[value='Kilometer']\");\n }\n if (choice === \"Mile\"){\n var $radiobutton = $(\"input[value='Mile']\");\n } else{\n //var $radiobutton = $(\"input[value='\"+$(this).val()+\"']\");\n // $radiobutton.prop(\"checked\", true);\n }\n });\n }, false);\n</script>\n<form action=\"#\" style=\"text-align:center\">\n <fieldset class=\"rounded\">\n <legend style=\"text-align:center\">Tool Bar Config</legend>\n <span>Set Unit</span>\n <label class=\"input-sizer stacked\">\n <div ng-repeat=\"unit in msg.payload track by $index\" style=\"display: inline-block\">\n <label>\n <input type=\"radio\" ng-model=\"$parent.unit\" value=\"{{unit}}\" name=\"data\" style=\"display:inline-block\">{{unit}}\n </label>\n </div>\n </label><br>\n <div style=\"text-align: center\"><br>\n <md-button class=\" rounded\"\n ng-click=\"send({distance_unit:action(unit)})\">\n Update\n </md-button>\n </div>\n </fieldset>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 520,
"y": 380,
"wires": [
[
"ebd81bc6823ffc79",
"c0981a200ecf23a2"
]
]
},
{
"id": "3dbb8fc042678ed8",
"type": "inject",
"z": "c63e5607e59a6b15",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 310,
"y": 380,
"wires": [
[
"f150d383867c4579"
]
]
},
{
"id": "c0981a200ecf23a2",
"type": "debug",
"z": "c63e5607e59a6b15",
"name": "debug 12",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 720,
"y": 320,
"wires": []
},
{
"id": "f150d383867c4579",
"type": "function",
"z": "c63e5607e59a6b15",
"name": "function 5",
"func": "var arr = [\"Kilometer\", \"Mile\"]\nreturn {payload:arr}",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 520,
"y": 320,
"wires": [
[
"784babeb16609a41"
]
]
},
{
"id": "ebd81bc6823ffc79",
"type": "function",
"z": "c63e5607e59a6b15",
"name": "function 6",
"func": "if (msg.distance_unit === \"Kilometer\"){\n var choice = \"Kilometer\"\n flow.set(\"choice\",choice)\n}\nif (msg.distance_unit === \"Mile\"){\n choice = \"Mile\"\n flow.set(\"choice\", choice)\n}\nnode.status({ text: \"choice\" + choice }); //used for debug\nmsg = {payload:choice}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 720,
"y": 380,
"wires": [
[
"118529fddad7cc43"
]
]
},
{
"id": "53cf504.e9555b",
"type": "ui_group",
"name": "test",
"tab": "52aaa596.768b7c",
"order": 1,
"disp": false,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "52aaa596.768b7c",
"type": "ui_tab",
"name": "Test",
"icon": "dashboard"
}
]
