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

[markjohnson123]

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!

 

[BillyRayPreachersSon]

It's not a Prototype restriction - it's completely invalid HTML!

You should either put your form tags outside the table, or inside a table cell (TD).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[markjohnson123]

I realise it is invalid, but how can I achieve the objective of having a form in each table row, with all the TDs in a column being consistently equal - without being fixed-width?

 

[BillyRayPreachersSon]

You can style form elements as you would any other element... so width, height, display inline, etc. However, I'd have thought that if your TDs have widths, the form would fit to that width.

That being said, perhaps this is a question for forum215 instead of here, if you need help styling the form or table.

I certainly wouldn't advise hacking Prototype to work around what you know is invalid HTML.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[vicvirk]

If you want each row of a table to be a separate form and you want to use a table structure, nest a table in your main table for each row within the td tags, it's ugly but valid...

<table>
	<tr>
		<td>
			<form id="frmOne" action="#" method="post">
			<table>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
			</form>
		</td>
	</tr>
	<tr>
		<td>
			<form id="frmTwo" action="#" method="post">
			<table>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
			</form>
		</td>
	</tr>
</table>

the other alternative is to use a css based layout where each of your "embedded tables" can be div tags floating to the left of each other...



TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[feherke]

Hi

vicvirk, that way the inner [tt]table[/tt]'s cells will stretch each around its own content. The OP wants the columns across the [tt]table[/tt] aligned without specifying fixed widths.

Feherke.

http://rootshell.be/~feherke/

 

[vicvirk]

feherke,

Yeah, I didn't account for that ...

How about this: if each row is a form, then is it safe to assume that each row has some sort of a "submit" feature?

Make your table one giant form. On each row, have a "button" instead of a "submit" and use the onClick event to populate a second hidden form with the data from that row and submit that one:

Haven't tested this, but you should get the idea of what I am trying to acheive:

<script language="javascript">
	function submitData(intRow) {
		for (var ndx = 1 to 3) {
			document.getElementById("tbx" + ndx).value = document.getElementById("row_" + intRow + "_tbx" + ndx).value;
		}
		document.getElementById("frmSubmitData").submit();
	}
</script>

<form action="#" method="post" onSubmit="return false;">
<table>
	<tr>
		<td><input type="text" id="row_1_tbx1" /></td>
		<td><input type="text" id="row_1_tbx2" /></td>
		<td><input type="text" id="row_1_tbx3" /></td>
		<td><input type="button" id="row_1_btn" onclick="submitData(1)"; /></td>
	</tr>
	<tr>
		<td><input type="text" id="row_2_tbx1" /></td>
		<td><input type="text" id="row_2_tbx2" /></td>
		<td><input type="text" id="row_2_tbx3" /></td>
		<td><input type="button" id="row_2_btn" onclick="submitData(2)"; /></td>
	</tr>
</table>
</form>

<form action="" method="post" id="frmSubmitData">
	<input type="hidden" id="tbx1" value="" />
	<input type="hidden" id="tbx2" value="" />
	<input type="hidden" id="tbx3" value="" />
</form>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[vicvirk]

for (var ndx = 1 to 3)

should obviously be

for (var ndx = 1 ; ndx <= 3 ; ndx++)

Got my vbs and js mixed up

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers