# How to- submit html form using template table

**URL:** https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100
**Category:** Dashboard
**Created:** [30 June 2024 07:03 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100 "2024-06-30T07:03:40Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [30 June 2024 07:03 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/1 "2024-06-30T07:03:40Z")

</div>

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e4b765580829b0d730252c9a76b48747e493a5d5.png)

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.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [30 June 2024 08:03 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/2 "2024-06-30T08:03:36Z")

</div>

You can use ng-model and ng-submit.

```auto
<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>

```

> **[AngularJS](https://docs.angularjs.org/api/ng/directive)**
>
> AngularJS is what HTML would have been, had it been designed for building web-apps.
> Declarative templates with data-binding, MVC, dependency injection and great
> testability story all implemented with pure client-side...

\*note not all directives are implemented.

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

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [30 June 2024 09:09 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/3 "2024-06-30T09:09:00Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 June 2024 09:21 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/4 "2024-06-30T09:21:01Z")

</div>

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](https://discourse.nodered.org/t/node-red-dashboard-v1-deprecation-notice/89006)

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [30 June 2024 09:29 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/5 "2024-06-30T09:29:07Z")

</div>

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.

> [@Dashboard 2.0 is now Generally Available](https://discourse.nodered.org/t/dashboard-2-0-is-now-generally-available/84913/8):
>
> Can I use state-trail in dashboard-2 ? I am using this extensively in current dashboard.

> [@Dashboard 2.0 is now Generally Available](https://discourse.nodered.org/t/dashboard-2-0-is-now-generally-available/84913/9):
>
> No. And that's the sad case of course. I'm kind of feel a little pressure to migrate some of my more popular widgets to DB2 but yeah, it takes quite of resources to invest.

So i am bound to db-1 till then.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 June 2024 10:39 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/6 "2024-06-30T10:39:42Z")

</div>

Fair enough.

Once we get the [chart component moved over to echarts](https://github.com/FlowFuse/node-red-dashboard/issues/676#issuecomment-2063913190) in #dashboard-2, the state trail (state timeline) can be done as a chart.

Here is an example I just knocked up:

https://codepen.io/Steve-Mcl/embed/preview/dyEBeZy?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=dyEBeZy

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 July 2024 10:40 UTC](https://discourse.nodered.org/t/how-to-submit-html-form-using-template-table/89100/7 "2024-07-14T10:40:37Z")

</div>

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