title: Dynamic Form Fields on Table using thymeleaf and Spring Boot
body: <p>I am trying to create rows dynamically in a table using thymeleaf and spring boot.</p>
  
  <p>I've looked at following urls but couldn't make it working for me.</p>
  
  <p><a href="http://forum.thymeleaf.org/I-have-problem-in-binding-the-list-of-objects-contained-inside-a-object-on-the-form-using-thymeleaf-td3525038.html#a3526497" rel="nofollow">http://forum.thymeleaf.org/I-have-problem-in-binding-the-list-of-objects-contained-inside-a-object-on-the-form-using-thymeleaf-td3525038.html#a3526497</a></p>
  
  <p><a href="http://stingh711.github.io/dynamic-form-with-springmvc-and-thymeleaf.html" rel="nofollow">http://stingh711.github.io/dynamic-form-with-springmvc-and-thymeleaf.html</a></p>
  
  <p>when I click on the <code>addCourse</code> button, its not even going to StudentController.</p>
  
  <p>please can someone help?</p>
  
  <p><strong>Student.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd"&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout"&gt;
  &lt;head&gt;
  &lt;title&gt;Students&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div layout:fragment="content"&gt;
      &lt;form th:object="${student}" th:action="@{/student/create}" action="#" method="post"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-offset-3 col-md-6"&gt;
                  &lt;div class="panel panel-success"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;h3 class="panel-title"&gt;Add New Student&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;input type="text" th:field="*{studentId}" class="form-control" placeholder="Student Id" /&gt;
                          &lt;div style="clear: both; display: block; height: 10px;"&gt;&lt;/div&gt; 
                          &lt;input type="text" th:field="*{firstName}" class="form-control" placeholder="First Name" /&gt;
                          &lt;div style="clear: both; display: block; height: 10px;"&gt;&lt;/div&gt;
                          &lt;input type="text" th:field="*{lastName}" class="form-control" placeholder="Last Name" /&gt;
                          &lt;div style="clear: both; display: block; height: 10px;"&gt;&lt;/div&gt;
                          &lt;input type="text" th:field="*{city}" class="form-control" placeholder="City" /&gt;
                          &lt;div style="clear: both; display: block; height: 10px;"&gt;&lt;/div&gt;
                          &lt;input type="submit" class="btn btn-success pull-right"
                              value="Save"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- start of detail section --&gt;
          &lt;div class="row" style="margin-bottom: 50px;"&gt;
              &lt;div class="col-md-offset-2 col-md-8"&gt;
                  &lt;div class="panel panel-success"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;h3 class="panel-title"&gt;Student Courses&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;table class="table table-bordered table-striped table-hover"&gt;
                              &lt;thead&gt;
                                  &lt;tr class="btn-success"&gt;
                                      &lt;th&gt;Course&lt;/th&gt;
                                      &lt;th&gt;End Date&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr th:each="studentCourse, rowStat : *{studentCourses}"&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].courseId}" placeholder="Course" /&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].endDate}"  placeholder="End Date"/&gt;
                                      &lt;span class="col-sm-1 row-delete-button"&gt;
                                          &lt;button class="btn btn-default" th:value="*{studentCourses[__${rowStat.index}__].studentCourseId}" name="removeStudentCourse"&gt;
                                              &lt;i class="glyphicon glyphicon-trash icon-white"&gt;&lt;/i&gt;
                                          &lt;/button&gt;
                                  &lt;/span&gt;
  
                                      &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                          &lt;button class="btn btn-success btn-add" type="submit" name="addCourse"&gt;
                              &lt;i class="glyphicon glyphicon-plus gs"&gt;&lt;/i&gt; &lt;b&gt; Add&lt;/b&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- end of detail  --&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>StudentController</strong></p>
  
  <pre><code>@RequestMapping(value="/Student", params = {"addCourse"})
  public String addCourse(Student student, BindingResult result) {
      System.out.println("add new course");
  
      student.getCourseList().add(new StudentCourse());
      return "Student";
  }
  </code></pre>
  
  <p><strong>js.html (locatated @ templates/fragments)</strong></p>
  
  <pre><code>&lt;!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd"&gt;
  
  &lt;script th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>style.html (locatated @ templates/fragments)</strong></p>
  
  <pre><code>&lt;!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd"&gt;
  
  &lt;link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}" /&gt;
  </code></pre>