Form is removed from AJAX response

Question

I'm trying to add a table row with ajax/jquery that has a form element in it. Everything works just fine if I set it without the ajax, but somehow everything inside the <form> tag is just completely lost.

I'm not sure where I'm losing the form (jquery's .html() is effectively the same as innerHTML right? If that's the case I suspect that's where I'm losing it).

Anyway, here's some code:

var worow = document.getElementById('worow_' + row);
var wotable = document.getElementById('tbl_workorders');

// add a new row to the table underneath our existing row.
var newrow = wotable.insertRow(worow.rowIndex+1);
var x = newrow.insertCell(0);

// set up the row a little bit
x.colSpan = 13;
x.style.padding = '10px';
x.style.backgroundColor = '#ccc';
x.align = "center";

x.innerHTML = '<img src="/images/loading.gif" />';

// a little ajax cuz we're cool that way
$.post("getwotrans.php", 
{
    workorder: row
}, 
function(response)
{

    // set the value of the row = response object from the AJAX
    $(x).html(response);
});

And in getwotrans.php: (paraphrased)

<table>
<thead><tr><td>blahblah</td></tr></thead>
<tbody><form><tr><td><input></td></tr></form></tbody>
</table>

So what happens is I'll run the javascript function to add the row, and the row is added fine and I see the table headers, but the 'form' inside the tbody is just not there.

Answer 1

What happens when you put the form outside of the table?

<form><table>
<thead><tr><td>blahblah</td></tr></thead>
<tbody><tr><td><input></td></tr></tbody>
</table></form>

Just curious if this will fix the issue or not? It is odd that this would happen without something equally odd to fix it!

Answer 2

a form cannot be a child element of tbody

Answer 3

Mhh i had some simliar problem. I used a hidden form and javascript to copy the values of the row clicked to the hidden form elements and then submit the form via javascript. Maybe thats an idea.