title: Add a field to an HTML form in a table using jQuery
body: <p>I have a table, which can contain arbitrarily many rows. Each of these rows holds an element of a form field. Initially, it looks like this: </p>
  
  <pre><code>&lt;table border="2" id="familyHeader"&gt;
    &lt;tr&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;Still associated?&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr id="addNewChildRow"&gt; 
      &lt;td&gt; 
        &lt;input type="text" ....&gt; 
        &lt;input type="text" ....&gt;
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;input type="submit" ....&gt;  &lt;!-- this is intentionally not part of a form element --&gt;
      &lt;/td&gt; 
    &lt;/tr&gt;
  
  &lt;form id="family" method="post" action="php/update_children.php"&gt;
    &lt;tr id="updateChildrenRow"&gt;
      &lt;td&gt; &gt; &gt; &gt; &gt; &gt; &gt; &lt;/td&gt;
      &lt;td&gt; 
        &lt;input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/&gt; 
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/form&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So basically the top part allows you to enter details - there is a capture on the first "submit" button which adds rows to the table. It adds them before the final row (so hopefully within the form element) using this JavaScript/jQuery: </p>
  
  <pre><code>function insert_child(id, type, snumber, serialnumber)
  {
      $('#updateChildrenRow').before("&lt;tr&gt; &lt;td&gt;"+ type+" | "+snumber+" | "+serialnumber +"&lt;/td&gt;"
      //$('#family').append("&lt;tr&gt; &lt;td&gt;"+ type+" | "+snumber+" | "+serialnumber +"&lt;/td&gt;"
         + "&lt;td&gt; &lt;input type=\"hidden\" name=\""+id+"\" value=\"false\" /&gt;" 
         + "&lt;input type=\"checkbox\" checked=\"true\" name=\""+id +"\" value=\"true\"/&gt; &lt;/td&gt;"
         + "&lt;/tr&gt;");
  }
  </code></pre>
  
  <p>This works, in that it inserts the element in the right place, but when we submit the form, the data is not POSTed. However, if we move the form element opening to the second line and submit, the "addNewChildRow" buttons are POSTed (which I presume shows my posting logic works, but it's just not detecting the dynamically added fields). </p>
  
  <p>As you can see, I have tried appending to the form itself rather than the table, and this hasn't worked (they aren't displayed) - does anyone know what the trick is to dynamically add form elements to a table where they will be "detected" by the form which surrounds it? </p>
  
  <p>Thanks :) </p>