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

你可以有这样的东西：

<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">

当您使用 javascript/php 或其他方式添加 div 时，只需在隐藏输入 num_of_elements 中添加元素计数

然后当您在 PHP 中提交它时，您将拥有如下变量：

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

Answer 2

I think this will work:

<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>