How to- submit html form using template table

Dashboard
1 
[{"id":"7edcb80bd9be9214","type":"ui_template","z":"8aeac5104f2cecfe","group":"feabd600.f71b28","name":"","order":9,"width":"24","height":"6","format":"<html>\n<body></body>\n<h1>Heading</h1>\n<TABLE BORDER=\"1\">\n    <TR>\n        <TD>Name</TD>\n        <TD ALIGN=\"left\"><INPUT TYPE=\"text\" SIZE=\"25\" NAME=\"fname\">\n        </TD>\n    </TR>\n    <TR>\n        <TD>Phone Number</TD>\n        <TD ALIGN=\"left\"><INPUT TYPE=\"text\" SIZE=\"25\" NAME=\"phnnum\">\n        </TD>\n    </TR>\n         <TR>\n    <TD class = \"select\">Chose Vehicle         \n    </TD>   \n    <TD ALIGN=\"center\">\n       <select>        \n            <option value=\"volvo\">Volvo</option>\n            <option value=\"saab\">Saab</option>\n            <option value=\"mercedes\">Mercedes</option>\n            <option value=\"audi\">Audi</option>\n       </select>\n    </TD>        \n</TR>\n<TR>\n<TD><INPUT TYPE=\"submit\" VALUE=\"Submit\"></TD>\n<TD><INPUT TYPE=\"reset\" VALUE=\"Clear\"></TD>\n</TR>\n</TABLE>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":885,"y":975,"wires":[["d3630c6148dae849"]]},{"id":"21e71c60190faed9","type":"inject","z":"8aeac5104f2cecfe","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":735,"y":975,"wires":[["7edcb80bd9be9214"]]},{"id":"d3630c6148dae849","type":"debug","z":"8aeac5104f2cecfe","name":"debug 2604","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1055,"y":975,"wires":[]},{"id":"feabd600.f71b28","type":"ui_group","name":"Default","tab":"fb98fdb9.b193a","order":1,"disp":false,"width":"24","collapse":false},{"id":"fb98fdb9.b193a","type":"ui_tab","name":"Home","icon":"dashboard","order":14}]

image
image748Ă—196 2.63 KB

I am trying to get a dropdown list inside a table cell. i somehow managed to get it with example in the forum,
however, i am unable to get the data out of the template node.
i searched but could not get exactly what i need to do to get the data that i input in the table out side of the template node.

2

You can use ng-model and ng-submit.

<h1>Heading</h1>
<form ng-submit="send({payload: mymodel})">
<TABLE BORDER="1">
    <TR>
        <TD>Name</TD>
        <TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="fname">
        </TD>
    </TR>
    <TR>
        <TD>Phone Number</TD>
        <TD ALIGN="left"><INPUT ng-model="mymodel.number" TYPE="text" SIZE="25" NAME="phnnum">
        </TD>
    </TR>
         <TR>
    <TD class = "select">Chose Vehicle         
    </TD>   
    <TD ALIGN="center">
       <select ng-model="mymodel.select" >        
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
       </select>
    </TD>        
</TR>
<TR>
<TD><INPUT TYPE="submit" VALUE="Submit"></TD>
<TD><INPUT TYPE="reset" VALUE="Clear"></TD>
</TR>
</TABLE>
</form>

*note not all directives are implemented.

[edit] Removed html and body tags as the dashboard would have already added them

1 Like
3

Thanks a ton. I would need a few more tips and will return to this topic (or create a new thread) once I convert my flow to actual requirement based on this example.

4

Can I say, if you are just starting this project, you might want to consider moving to Dashboard 2.0

See this thread for why: Node-RED-Dashboard (v1) - Deprecation Notice

5

I would love to, however.

  1. this is not a new project, i am extending the old project with more functionalities
  2. one of my important requirement is based on @hotNipi 's UI-State trail, and without that or any equivalent of that, i cannot shift my project yet.

So i am bound to db-1 till then.

6

Fair enough.

Once we get the chart component moved over to echarts in dashboard-2, the state trail (state timeline) can be done as a chart.

Here is an example I just knocked up:

1 Like