title: Spring 3 MVC: one-to-many within a dynamic form (add/remove on create/update)
body: <p>I'm looking for a solution to <strong>manage a one-to-many relation within an HTML form</strong> using <strong>jQuery</strong>. I'm developing with <strong>Spring</strong>, <strong>Spring MVC</strong> and <strong>Hibernate</strong>. I found many tracks on the web, but not any working full-example.</p>
  
  <h3>The background</h3>
  
  <p>I've three JPA entities:</p>
  
  <p><code>Consult.java</code> (1)</p>
  
  
  
  <pre class="lang-java prettyprint-override"><code>@Entity
  @Table(name = "consult")
  public class Consult
  
      private Integer id;
      private String label;
      private Set&lt;ConsultTechno&gt; consultTechnos;
  
      /* getters &amp; setters */
  
  }
  </code></pre>
  
  <p><code>ConsultTechno.java</code> (2)</p>
  
  
  
  <pre class="lang-java prettyprint-override"><code>@Entity
  @Table(name = "consult_techno")
  public class ConsultTechno {
  
      private Integer id;
      private Techno techno;
      private Consult consult;
      private String level;
  
      /* getters &amp; setters */
  
  }
  </code></pre>
  
  <p><code>Techno.java</code> (3)</p>
  
  
  
  <pre class="lang-java prettyprint-override"><code>@Entity
  @Table(name="techno")
  public class Techno {
  
      private Integer id;
      private String label;
      private Set&lt;ConsultTechno&gt; consultTechnos;
  
      /* getters &amp; setters */
  
  }
  </code></pre>
  
  <p>As shown, a Consult (1) contains <em>n</em> ConsultTechnos (2), which are caracterized by a <em>level</em> and a Techno (3).</p>
  
  <h3>The needs</h3>
  
  <p>Using an HTML form, I would like to have a <code>Add a techno</code> button which dynamically adds two fields in the DOM:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" name="consult.consultTechnos[].techno.id" /&gt;
  &lt;input type="text" name="consult.consultTechnos[].level" /&gt;
  </code></pre>
  
  <p>Of course, each time the user clicks on the button, those two fields should be re-added, etc. I chose <code>input type="text"</code> for the example, but at the end, the fields will be two <code>select</code>.</p>
  
  <p>Four kinds of operation should be covered:</p>
  
  <ol>
  <li><strong>Add</strong> a child entity when <strong>creating</strong> a new master entity</li>
  <li><strong>Remove</strong> a child entity when <strong>creating</strong> a new master entity</li>
  <li><strong>Add</strong> a child entity when <strong>updating</strong> a new master entity</li>
  <li><strong>Remove</strong> a child entity when <strong>updating</strong> a new master entity</li>
  </ol>
  
  <h3>The problem</h3>
  
  <p>That <em>layout part</em> already works, but when posting the form, I can't manage to bind the dynamically added fields to my <code>@ModelAttribute consult</code>.</p>
  
  <p>Do you have any idea of how to do that kind of jobs? I hope I've been clear enough...</p>
  
  <p>Thanks in advance <code>:)</code></p>