Multiple forms in a table, best practices?

[innodivergence]

Howdy,

I have a postgres table that I would like to render in HTML, and have
each record be selectable indevidually with a button. The easiest way
to do this seemed to be to make each row a FORM, and use a hidden
record to identify the recordid for the respective record.

Apparently placing FORM statements between the TRs is invalid HTML.

I could nest a table, but that breaks inheritance and makes each
record scale differently (and looks terrible). I could style up the
indevidual forms with fixed widths, but that is even worse because my
TABLE is no longer dynamically scaled, which means that every single
form-enabled web page will need indevidual styling information. (Read
as: creates many hours of work uneccessarily)

Is there a way to render dynamically scaled tables, AND use multiple
forms in a table in a fashion that doesn't look like garbage, AND do
it in a reasonably portable way?

Thanks in advance
JMA

[Scott Bryce]

On 4/17/2013 7:40 AM, innodivergence wrote:
> Howdy,
>
> I have a postgres table that I would like to render in HTML, and
> have each record be selectable indevidually with a button. The
> easiest way to do this seemed to be to make each row a FORM, and use
> a hidden record to identify the recordid for the respective record.

Consider that only the button and the hidden tag need to be inside the
form to make this work, and I think you will find a solution to your
problem. The rest of the record is simply additional information that
appears in the same row of the table.

[innodivergence]

Thanks!

You have saved me at least a days work.

JMA

[Thomas 'PointedEars' Lahn]

innodivergence wrote:
^^^^^^^^^^^^^^
Who?

In theory, you could put several forms in table cells. You do not have to
style those forms, then. But this does not scale. (I am not sure if that
is what Scott was suggesting.)

So DRY and simply put the table containing the controls in *one* form.

<form …>
<table>
…
</table>
</form>

Name controls the same for the same data (in PHP you would use the “[]”
suffix to get an array of values when submitted). You do not need a hidden
input, though (if you need any, it should be one two four above the table
but in the form (among them a security value); let the submit button name or
value define what the server-side script should do when one of them is
activated.


PointedEars
--
When all you know is jQuery, every problem looks $(olvable).

[Scott Bryce]

On 4/17/2013 10:28 AM, Thomas 'PointedEars' Lahn wrote:
> (I am not sure if that is what Scott was suggesting.)

I'm suggesting something more like this...
(hoping the formatting holds)



<table
<tr>
<td>
<form action='some_script.pl' method='post'>
<p>
<input type='hidden' name='id_number' value='12345'>
<input type='submit' name='submit' value='Submit'>
</p>
</form>
</td>
<td>Some</td>
<td>Additional</td>
<td>Fields</td>
</tr>

<!-- additional table rows for the other records -->

</table>

[Eli the Bearded]

In comp.infosystems.www.authoring.html,

Scott Bryce <sbr...@scottbryce.com> wrote:
> I'm suggesting something more like this...
>

> <table
> <tr>
> <td>
> <form action='some_script.pl' method='post'>
> <p>
> <input type='hidden' name='id_number' value='12345'>
> <input type='submit' name='submit' value='Submit'>

<input type='submit' name='12345' value='Submit'>

> </p>
> </form>
> </td>
> <td>Some</td>
> <td>Additional</td>
> <td>Fields</td>
> </tr>

> </table>

Elijah
------
who says lhs and rhs need to be special?

[Thomas 'PointedEars' Lahn]

Then I understood you correctly, and you should read my answer again.

Consider this table having a lot of rows. You would need to repeat the
form, the action and everything else *per row*. AISB, that approach does
not scale, i.e. it is wasteful with a lot of rows.

This one, that I described before, does scale well (and is Valid HTML):

<form action="some_script" method="POST">
<input type="hidden" name="security_token" value="…">
<table>
<tr>
<td><button type="submit" name="id_number" value="12345"
>Submit</button></td>

<td>Some</td>
<td>Additional</td>
<td>Fields</td>
</tr>

…
</table>
</form>

(Avoid naming form controls “submit”; because of backwards-compatibility to
DOM Level 0, that would override the “submit” method of the form.)

It does not matter if there are several submit buttons with the same name,
because those names need not be unique. And only the activated submit
button is considered successful, so there are no duplicates in the request
as well.

Or you may not want to duplicate the submit button, but have several other
controls to select the row(s), and *one* submit button to submit the
selection:

<form action="some_script" method="POST">
<input type="hidden" name="security_token" value="…">
<input type="submit" value="Submit">
<table>
<tr>
<td><input type="radio" name="selection" id="rb12345"
value="12345"></td>
<td><label for="rb12345">Some</label></td>

<td>Additional</td>
<td>Fields</td>
</tr>

…
</table>
</form>

or

<form action="some_script" method="POST">
<input type="hidden" name="security_token" value="…">
<input type="submit" value="Submit">
<table>
<tr>
<td><input type="checkbox" name="selection[]" id="cb12345"
value="12345"></td>
<td><label for="rb12345">Some</label></td>

<td>Additional</td>
<td>Fields</td>
</tr>

…
</table>
</form>

The latter implementation can be augmented with client-side scripting to
select no rows or all rows. Both implementations can be augmented with
client-side scripting to select the rows to activate the “input” element if
it was clicked somewhere in the row (although “label” elements might suffice
for you).

Either implementation is very common in Web applications – therefore
expected by the user –, for example in e-mail Web interfaces.


HTH

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[Thomas 'PointedEars' Lahn]

Eli the Bearded wrote:

> In comp.infosystems.www.authoring.html,
> Scott Bryce <sbr...@scottbryce.com> wrote:
>> I'm suggesting something more like this...
>>
>> <table
>> <tr>
>> <td>
>> <form action='some_script.pl' method='post'>
>> <p>
>> <input type='hidden' name='id_number' value='12345'>
>> <input type='submit' name='submit' value='Submit'>
>
> <input type='submit' name='12345' value='Submit'>

This will be hard to tell apart server-side. Recommended against.

> who says lhs and rhs need to be special?

Common sense.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

> <form action="some_script" method="POST">
> <input type="hidden" name="security_token" value="…">
> <input type="submit" value="Submit">
> <table>
> <tr>
> <td><input type="checkbox" name="selection[]" id="cb12345"
> value="12345"></td>
> <td><label for="rb12345">Some</label></td>

Should be

<td><label for="cb12345">Some</label></td>


PointedEars
--
> If you get a bunch of authors […] that state the same "best practices"
> in any programming language, then you can bet who is wrong or right...
Not with javascript. Nonsense propagates like wildfire in this field.
-- Richard Cornford, comp.lang.javascript, 2011-11-14