2

I have a page where there is a table. In each row of the table, there is data about an online grocery delivery order. At the end of each row, there is a submit button about action to be performed on the order and the form ends there. A new form begins with the next row <tr>

Where exactly should I put the <form> and </form> tags? Should I put the <form> before each <tr> and </form> after the </tr> or should I introduce them in the first data cell <td> of each row and close in the last <td>?

I mean, the page would probably function all right in both ways, but what is "proper" way of doing this? Right now mozilla code view is showing the table tag in red color.

This is how it looks right now. enter image description here

And this is the relevant part of the php code I am using to dynamically generate a new form for each table row. I am posting this just for the sake of reference, because this does not matter at all here. My question is basic HTML based, not php based.

for($i=0;$i<$count;++$i){
    $res.='<form action="" method="post">' ."\n" .'<input type="hidden" name="orderid" value="' .$orders[$i]->idcode .'" />';
    $res.="$nt<tr><td align=\"center\">" .$orders[$i]->display("pe","</td><td align=\"center\">") ."</td>$nt\t<td align=\"center\"><select name=\"agent\">$alistcode</select></td>$nt\t<td align=\"center\"><select name=\"vendor\">$vlistcode</select></td>";
    $res.="$nt\t<td align=\"center\"><input type=\"submit\" value=\"PROCESS\" /></td>\n</tr>\n</form>\n";
}
$res.="</table>";
echo $res;
7
  • 1
  • The best solution is to not use a <table> layout. Use a CSS table layout if you really want one. It's the second answer in the dupe. Commented Aug 7, 2016 at 4:25
  • Would it be "proper" programming practice to introduce the new form in the first <td> of each row and end it in the last cell of each row? Commented Aug 7, 2016 at 4:36
  • 1
    When it's not specified, a <tbody> element is put inside the <table> element. The only valid children for a <tbody> element is a <tr> element. The only valid children for a <tr> element is <th> or <td>. So there really isn't any room in the HTML spec for a <form> element. Some browsers will allow it, but it won't always work. Commented Aug 7, 2016 at 4:46
  • @YoustayIgo <td><form></td>...<td></form></td> is WORST practice. Commented Aug 7, 2016 at 4:51

2 Answers 2

11

HTML5 offers decent solution for your problem. And its name is form attribute. Just put the form into last <td> and refer to its id from other inputs. See example.

<table>
    <tr>
        <td>
            <input type="text" name="inp1" form="form1" />
        </td>                         <!-- ^^^^  ^^^^^ -->
        <td>
            <form id="form1" method="get" action="/">
             <!-- ^^  ^^^^^ -->
                <input type="submit" name="submit1" value="submit" />
            </form>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="inp2" form="form2" />
        </td>
        <td>
            <form id="form2" method="get" action="/"><input type="submit" name="submit2" value="submit" /></form>
        </td>
    </tr>
</table>
3
  • 1
    The problem here is that I have 2 (or more) form objects in each <tr>. Thanks for the effort though. Upvoted Commented Aug 10, 2016 at 16:36
  • 1
    Yes you can add more inputs, selects, textareas in each row and add form attribute for each of them. The example shows just one "outer" input for shortness. The point is to put <form> element inside a single <td>. Commented Aug 10, 2016 at 17:05
  • Yes, this is long known issue of IE. See stackoverflow.com/questions/20658402/… Commented Nov 9, 2017 at 0:54
1

If using javascript is an option, you can work without <form> tags? I used jQuery in this example, data is posted to itself (first argument of $.post()).

Table

<table>
        <tbody>
            <tr>
                <td><input name="inputfield[]" type="text" value="input1" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select1-option1">select1-option1</option>
                    <option value="select1-option2">select1-option2</option>
                    <option value="select1-option3">select1-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
            <tr>
                <td><input name="inputfield[]" type="text" value="input2" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select2-option1">select2-option1</option>
                    <option value="select2-option2">select2-option2</option>
                    <option value="select2-option3">select2-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
            <tr>
                <td><input name="inputfield[]" type="text" value="input3" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select3-option1">select3-option1</option>
                    <option value="select3-option2">select3-option2</option>
                    <option value="select3-option3">select3-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
        </tbody>
    </table>

Script

$(".submit").on("click", function(){
    var row = $(this).parents("tr");
    $.post("", row.find("input, select, radio").serialize(), function(data){ console.log(data); });
});

JSFiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.