CODEWITHSUNDEEP
htmlw3c
developarvin
developarvin

Reputation: 5087

How to mark up a table such that each row is a submittable form?

I need to allow my users to insert new records into my database -- and the interface given to me is a table. When the user completes entering data in all the cellls of the table, they will click that row's "save" button. That button needs to submit the row's field values via POST.

What is the correct mark up for this that is both W3C standards compliant and semantically correct?

A <td> can contain a form, right? And a <td> can span multiple columns? Maybe the rowshould only be a <td> that spans all the columns of the table? Would that work?

Upvotes: 1

Views: 537

Answers (3)

sqwk
sqwk

Reputation: 1596

You submit the data as an array, then loop through it in your serverside code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CRUD Table</title>
</head>
<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td><input name="data[0][name]"/></td>
                <td><input name="data[0][lastname]"/></td>
            </tr>
            <tr>
                <td><input name="data[1][name]"/></td>
                <td><input name="data[1][lastname]"/></td>
            </tr>
       </table>
       <p><input type="submit" value="Save" /></p>
    </form>
</body>
</html>

Have jQuery add another row as soon as you fill in the first one. The only thing you need to watch that you generate a distinct id for each row: data[0], data[1], etc.

Upvotes: 1

Arsen7
Arsen7

Reputation: 12820

I would say it's not possible to mix a table with forms in this way. A form cannot contain a row without containing the whole table, and your idea of having one big <td> spanning all the columns makes the table semantically incorrect. You would have a list, not a table, in that case.

You could create a one large form, with the table and all the inputs inside.

Your server can decide which records were supposed to be saved by recognizing the clicked button. (But beware of Internet Explorer - it may still have that bug, by which it sends all the buttons, even if only one has been clicked). However, the amount of data being sent may be pretty large, so maybe you can use a JavaScript somehow? For example to disable the controls which do not belong to the row containing the clicked button?

Upvotes: 0

Anantha Sharma
Anantha Sharma

Reputation: 10098

you can achieve this using jQuery & AJAX..

say your markup is

<table>
<tr>
<td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td>
</tr>
...
</table>

your jQuery would be like..

// event for every row's button click
$("table tr").filter(".SubmitButton").click(function(){
// this would create the param list of all the fields in the row 
var content=$(this).parent().parent().serialise();
// send to server
$.post('url',content,function(){
alert('Row Submitted');
});
});

Upvotes: 0

Related Questions