求助：JavaScript动态追加文本域后表单提交仅发送最新元素

问题场景 #

我制作了一个支持动态添加文本域的PHP表单，相关代码如下：

表单代码 #

<form action="" id="primaryPostForm" method="POST" enctype="multipart/form-data">
  <label for="postContent">帖子内容</label>
  <textarea name="postContent[]" class="postContent form-control" style="height: 400px"><?php echo $c; ?></textarea>
  <button class="btn btn-dark" id="addContent">添加</button>
</form>

动态添加文本域的JS代码 #

var newTextArea = "<label for='postContent'>帖子内容</label><textarea name='postContent[]' class='postContent form-control' style='height: 400px;'></textarea>";
$("#addContent").on("click", function(e) {
  e.preventDefault();
  $(newTextArea ).insertBefore(this);
});

PHP处理代码 #

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  foreach($_POST['postContent'] as $value) {
     add_post_meta ( $post_id, 'content', $value );
  }
  // 省略后续代码
}

我原本以为表单只提交了最后一个文本域的内容，但var_dump($_POST['postContent'])的结果显示数组包含两个元素：

array(2) { [0]=> string(16) "
First one

" [1]=> string(20) "
New added one

" } array(2) { [0]=> string(16) "
First one

" [1]=> string(20) "
New added one

" }

问题原因与解决 #

1. 重复输出的问题 #

var_dump结果出现两次相同数组，说明代码中存在重复执行的输出语句，检查并移除重复的var_dump即可。

2. 数据库仅存储最后一个值的问题 #

如果实际是数据库里只保存了最后一个文本域的内容，问题出在add_post_meta的默认行为：WordPress的add_post_meta函数第四个参数$unique默认值为true，这会限制同一帖子下相同键名的元数据只能保留最后一条。要添加多条同键名的元数据，需将该参数设为false：

修正后的PHP代码：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  foreach($_POST['postContent'] as $value) {
     // 设置第四个参数为false，允许添加多个相同键的元数据
     add_post_meta( $post_id, 'content', $value, false );
  }
  // 省略后续代码
}

3. JS代码优化（可选） #

当前JS逻辑可用，但动态创建DOM元素比复用字符串更可靠，能避免潜在的转义问题：

$("#addContent").on("click", function(e) {
  e.preventDefault();
  var fieldGroup = $('<div class="form-group"></div>');
  fieldGroup.append('<label for="postContent">帖子内容</label>');
  fieldGroup.append('<textarea name="postContent[]" class="postContent form-control" style="height: 400px;"></textarea>');
  fieldGroup.insertBefore(this);
});

内容的提问来源于stack exchange，提问作者rob.m