Workaround: Using multiple forms within a table — Oct 21, 2012, 9:40 pm
If you put multiple forms in a table-element, you will certainly have problems in most modern browsers. The form-tag will be closed by the browser, not including the input-fields. This is because it is not allowed anymore to nest form-tags inbetween.One form for one table would of course work:
<form method="post" action="somewhere">
<table>
<tr>
<td><input type="text" name="test" /></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>The following however will cause problems, because modern browsers pre-close any of these non-conform nested forms:
<table>
<tr>
<form method="post" action="somewhere">
<td><input type="text" name="test" /></td>
<td><input type="submit" /></td>
</form>
</tr>
<form method="post" action="somewhere">
<tr>
<td><input type="text" name="test" /></td>
<td><input type="submit" /></td>
</tr>
</form>
<tr>
<td><form method="post" action="somewhere"><input type="text" name="test" /></td>
<td><input type="submit" /></form></td>
</tr>
</table>If you still want to handle a list of forms in a table, here is a nice workaround with the help of Javascript. It will work with a endless number of forms and input fields per form. Important is that you use IDs.
<table>
<tr id="line1">
<td><input type="text" name="test" /></td>
<td><input type="button" value="Submit" onclick="SubmitForm('line1')" /></td>
</tr>
<tr id="line2">
<td><input type="text" name="test" /></td>
<td><input type="button" value="Submit" onclick="SubmitForm('line2')" /></td>
</tr>
<tr id="line3">
<td><input type="text" name="test" /></td>
<td><input type="button" value="Submit" onclick="SubmitForm('line3')" /></td>
</tr>
</table>
<form method="post" action="somewhere" id="myform"></form>And here is the magical Javascript part:
function SubmitForm(ID) {
var xForm = document.getElementById('myform');
var inp = document.getElementById(ID).getElementsByTagName('input');
for (var i=0; i<inp.length; i++) if (inp[i].name != '') xForm.innerHTML += '<input type="hidden" name="'+inp[i].name+'" value="'+inp[i].value+'" />';
xForm.submit();
}