Prototype: <form> inside a <table> doesn't work

[markjohnson]

I have been trying Ajax.Request for a form which exists as such:

</tr><form><tr><td></td></tr></form><form><tr> and so on....

I have just discovered that Prototype doesn't support a form interleaved in a table.

The forms must exist outside the table as such:
<form><table><tr>.....</table></form>

..for it to submit the form successfully.

Is there a way around it such that I can use Ajax.Request with the form interleaved in a table?

Thanks in advance!

[toicontien]

EDIT: Just finished reading the rest of your post, and the answer is no. You need proper HTML before the browser will properly create the document object model. Sounds like your HTML needs to be rearranged a little.

[markjohnson]

Right. I have a table and I would like each row to have a form. I cannot have a table within each row since I would like all the column to be same width. I cannot have fixed width either due to the nature of data.

What possibly can I do?

[toicontien]

You'll need to split your table into multiple tables:

<form>
  <table> ... </table>
</form>
<form>
  <table> ... </table>
</form>

You can resolve any styling issues that arise by using CSS.

[markjohnson]

You'll need to split your table into multiple tables:

<form>
  <table> ... </table>
</form>
<form>
  <table> ... </table>
</form>

You can resolve any styling issues that arise by using CSS.

CSS...

Using CSS, how can I make sure all the TDs (of the various independent tables) in a column are consistently of equal width, yet without having fixed-width?

I am sorry, if it's obvious to you... but if such technique does exist, it will be pretty new to me.

Thanks!

[toicontien]

You can't. You'll need to use fixed widths, but that really isn't a huge deal. I'll assume a few things, but this code should at least give you the general idea:

<form class="equalTables">
  <table>
    <tr>
      <td class="label"></td>
      <td><!-- form field --></td>
    </tr>
  </table>
</form>

<form class="equalTables">
  <table>
    <tr>
      <td class="label"></td>
      <td><!-- form field --></td>
    </tr>
  </table>
</form>

And the CSS:

.equalTables td.label {
  width: 100px;
}

The width you'll have to play around with to see what works best for this page. You miiiiiiight be able to give each FORM and form field an Id and then use the document.getElementById() function to access those tags, but I'm not sure. The easiest way in the long run is to start with valid markup, so I suggest the CSS method.