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

PS if anyone is wondering, I've got the hidden form elements so I can get true or false values on the checkbox, if the checkbox is not selected it's not sent in the POST, and I need to know if any have been "unselected". — Morris Fauntleroy
– Morris Fauntleroy, Commented Aug 8, 2012 at 9:50
@Sibu when the first "submit" button is clicked (not part of a form, it's caught by a listener), the two pieces of data from the text boxes above are collected and we POST to a databsase query script. The JSON returned is parsed in the callback and then passed to that function - it shows the data, and the ID is put in the right place - so I think that but works, but I'm not sure — Morris Fauntleroy
– Morris Fauntleroy, Commented Aug 8, 2012 at 10:17
so are you getting the checkbox and is name set. check it with firebug — Sibu
– Sibu, Commented Aug 8, 2012 at 10:24
@Sibu - confession time, I was using value.id instead of value.inventoryID - even with that change it still wasn't the problem, checking with firebug showed the form was being read as in <form></form> style with nothing in it - only way I've found that works is moving the form element round the outside of the table - we're getting those two text fields, which is what I wanted to avoid - but it seems like the only way in this case - thanks for your help/pointers - if you write that as an answer I'll accept it :) — Morris Fauntleroy
– Morris Fauntleroy, Commented Aug 8, 2012 at 10:43

Karabur · Accepted Answer · 2012-08-08 11:31:23Z

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.

Ah, i see you got the point while I fight this answering system :)

Ankur · Accepted Answer · 2012-08-08 09:56:15Z

1

Try doing an $.ajax(type post) or $.post and pass $('#family').serialize() as data.

answered Aug 8, 2012 at 9:56

Ankur

7911 gold badge4 silver badges15 bronze badges

1 Comment

Morris Fauntleroy Over a year ago

Still nothing coming through :/ and putting the contents out to an alert it comes up blank

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related