点击添加的DOM元素提交传递时出现未定义问题技术咨询

嘿，我明白你遇到的困扰了——动态添加的表单元素提交后变成undefined，大概率是因为新元素没有被正确配置表单属性，或者添加逻辑存在疏漏，咱们一步步来搞定它：

先看你给出的代码片段：

<form action="view.php" method="post"> 
  <textarea name="paragraph[]"></textarea>
  <input type="button" onclick="addparagraph();" value="+"> 
  <select name="font[]"> 
    <option>Tohoma</option>
    <option>Arial</option> 
  </select> 
  <div id="firstpart"></div> 
  <input type="submit" value="submit"/>
</form>

问题根源 #

你的addparagraph()函数应该是往#firstpart里追加新的表单元素，但大概率是这两个原因导致的问题：

• 动态添加的textarea/select没有设置正确的name属性（必须保持paragraph[]和font[]的数组格式，后端才能识别）
• 添加元素时的结构有误，比如没有将新元素正确嵌套在<form>内部（不过你的#firstpart已经在form里，这个可能性稍小）

修正后的完整代码示例 #

我帮你完善了addparagraph()函数，确保每次添加的元素都带有正确的属性和结构：

<form action="view.php" method="post"> 
  <!-- 初始表单组 -->
  <div class="form-item">
    <textarea name="paragraph[]"></textarea>
    <select name="font[]"> 
      <option value="Tohoma">Tohoma</option>
      <option value="Arial">Arial</option> 
    </select>
  </div>
  
  <input type="button" onclick="addparagraph();" value="+"> 
  <div id="firstpart"></div> 
  <input type="submit" value="submit"/>
</form>

<script>
function addparagraph() {
  // 创建新的表单元素容器
  const itemContainer = document.createElement('div');
  itemContainer.className = 'form-item';

  // 创建新的textarea，设置正确的name属性
  const newTextarea = document.createElement('textarea');
  newTextarea.name = 'paragraph[]';

  // 创建新的select，设置正确的name属性和选项
  const newSelect = document.createElement('select');
  newSelect.name = 'font[]';
  
  const optionTohoma = document.createElement('option');
  optionTohoma.value = 'Tohoma';
  optionTohoma.textContent = 'Tohoma';
  
  const optionArial = document.createElement('option');
  optionArial.value = 'Arial';
  optionArial.textContent = 'Arial';
  
  newSelect.appendChild(optionTohoma);
  newSelect.appendChild(optionArial);

  // 组装元素并添加到页面
  itemContainer.appendChild(newTextarea);
  itemContainer.appendChild(newSelect);
  document.getElementById('firstpart').appendChild(itemContainer);
}
</script>

后端接收验证（view.php） #

确保后端能正确接收数组格式的参数：

<?php
// 安全获取提交的参数，避免未定义报错
$paragraphs = $_POST['paragraph'] ?? [];
$fonts = $_POST['font'] ?? [];

// 遍历输出验证数据
foreach ($paragraphs as $index => $content) {
    echo "第{$index+1}段内容：{$content}，字体：{$fonts[$index]}<br>";
}
?>

关键注意点 #

• 所有动态添加的表单元素必须在<form>标签内部，否则表单提交时不会携带这些元素的数据
• 必须保持name="paragraph[]"和name="font[]"的格式，这样后端才能将参数识别为数组
• 确保动态元素的结构和初始元素一致，避免出现嵌套或属性遗漏的问题

这样修改后，你提交表单时，动态添加的元素值就能正确传递到view.php啦。

内容的提问来源于stack exchange，提问作者Dom