javascript - HTMLフォーム内に要素の配列をネストする正しい方法

Question

類似したアイテムのグループを含むHTMLフォームがあります。HTMLには「配列」の概念がないことを知っているので、単一のフォームを含み、必要に応じて同じアイテムの複数のグループを追加できるものを作成するための最良の方法は何でしょうか。

<form>

    <div>
        <input name="title[]">
        <textarea name="body[]">
    </div>

    <div>
        <input name="title[]">
        <textarea name="body[]">
    </div>

    <a href="#" id="addrow">Add row</a>

    <input type="submit">

</form>

Answer 1

You could have something like this:

<form method="post">

<input type="hidden" name="num_of_elements" value="2">

<div>
    <input name="title[0]">
    <textarea name="body[0]">
</div>

<div>
    <input name="title[1]">
    <textarea name="body[1]">
</div>

<a href="#" id="addrow">Add row</a>

<input type="submit">

When you add div with javascript/php or whatever, just add count of elements in hidden input num_of_elements

and then when you submit it in PHP you would have variables like:

$count = intval($_POST['num_of_elements']);
for($i = 0; $i < $count; $i++)
{
echo $_POST["title[{$i}]"];
}

Answer 2

私はこれがうまくいくと思います：

<form>

    <div>
        <input name="title[0]">
        <textarea name="body[0]">
    </div>

    <div>
        <input name="title[1]">
        <textarea name="body[1]">
    </div>

    <a href="#" id="addrow">Add row</a>

    <input type="submit">

</form>