javascript - 多次填写同一表单字段的内容并将其写入数据库的多行中

Question

我已经建立了一个表单。我在这个表单中放置了一个名为“添加一本书”的按钮。当用户单击时出现两个字段:“bookname”和“bookdate”:

               <div class="form-group col-md-3">
                <a class="btn btn-success" onclick="add()" href="#">
                <i class="glyphicon glyphicon-plus icon-white"></i>Add a book
                </a>
                </div>


                <div id="wrapper">
                <!-- champs du formulaire -->
                <div class="form-group col-md-12" id="add" style="display:none;">
                <!-- Bookname -->   
                <div class="form-row">              
                    <div class="form-group col-md-3">
                    <label for="exampleInputPassword1">Name of book</label>
                    <input type="text" class="form-control" id="bookname" name="bookname">
                    </div>
                </div>
                <!-- Bookdate -->   
                <div class="form-row">              
                    <div class="form-group col-md-3">
                    <label for="exampleInputPassword1">Date of book</label>
                    <input type="text" class="form-control" id="bookdate" name="bookdate">
                    </div>
                </div>
                </div>
                </div>

当只有一本书时，验证表单并将“bookname”和“bookdate”写入项目数据库没有问题。这很常见。
我的问题是:例如，如果用户单击“添加书籍”按钮 3 次并填写“书名”和“书日期”字段 3 次，我该如何在代码中将所有这些保存到三个不同的行中数据库？
也就是说:
书名 书名
姓名1 日期1
姓名2 日期2
名称3 日期3

我不知道该怎么办？
任何帮助将不胜感激。
谢谢!

Answer 1

您需要将 bookname 和 bookdate 输入上的 name 属性更改为数组表示法，即

<input type="text" class="form-control" id="bookname" name="bookname[]">
<input type="text" class="form-control" id="bookdate" name="bookdate[]">

然后，在您的 PHP 代码中，您会发现 $_POST['bookname'] 和 $_POST['bookdate'] 现在是值数组，因此您可以迭代它们，例如

foreach ($_POST['bookname'] as $k => $bookname) {
    $bookdate = $_POST['bookdate'][$k];
    // write bookname and bookdate to database
    ...
}