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(); }