Add a field to an HTML form in a table using jQuery

Question

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:

<table border="2" id="familyHeader">
  <tr>
    <th>Description</th>
    <th>Still associated?</th>
  </tr>
  <tr id="addNewChildRow"> 
    <td> 
      <input type="text" ....> 
      <input type="text" ....>
    </td> 
    <td> 
      <input type="submit" ....>  <!-- this is intentionally not part of a form element -->
    </td> 
  </tr>

<form id="family" method="post" action="php/update_children.php">
  <tr id="updateChildrenRow">
    <td> > > > > > > </td>
    <td> 
      <input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/> 
    </td>
  </tr>
</form>
</table>

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:

function insert_child(id, type, snumber, serialnumber)
{
    $('#updateChildrenRow').before("<tr> <td>"+ type+" | "+snumber+" | "+serialnumber +"</td>"
    //$('#family').append("<tr> <td>"+ type+" | "+snumber+" | "+serialnumber +"</td>"
       + "<td> <input type=\"hidden\" name=\""+id+"\" value=\"false\" />" 
       + "<input type=\"checkbox\" checked=\"true\" name=\""+id +"\" value=\"true\"/> </td>"
       + "</tr>");
}

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).

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?

Thanks :)

Answer 1

The problem here is not about 'detecting' added fields - this is greatly work always. Your real problem is what you put the 'form' tag as a child of 'table', but this is not allowed and treats as an error by browser. Browser tries to fix it - and cant do anything more then immediatelly close 'form' tag and trying to move all it content outside. (To give you as much as he can). After that it found a lost '/form' and just wipe it out.

Your markup is converted to this:

<table border="2" id="familyHeader">
 .......
<form id="family" method="post" action="php/update_children.php"></form>

  <tr id="updateChildrenRow">
    <td> > > > > > > </td>
    <td> 
      <input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/> 
    </td>
  </tr>
</table>

Now, your new inputs just created outside a form.

To fix it, you can do one of the following:

• Put the entire table into the 'form' tag. The easiest way, but in this case you will have two additional inputs (not a problem - just dont add the name attribute - and they will not be POSTed), and you must change type of the first button from 'submit' to 'button' so it will not trigger form submitting.
• Put the 'form' tag inside one of the 'td' or entire form outside of table. In this case you need change the way how you create attitional fields to make it look exactly as you want. (remember what you cannot add new 'td' directly to form - you must create a new table inside a form and add cells and rows to it. You can style everything to get what you want.

PS. Also, you have the same name for newly created hidden element and checkbox. Be sure what this is exactly what you want - behavior can be unexpected.

Answer 2

尝试执行$ .ajax（type post）或$ .post并将$（'＃family'）。serialize（）作为数据传递。