动态表单提交无法获取JS动态新增输入框值的问题排查

DevOps 小满

2026-8-30

问题根因

核心问题是HTML标签嵌套错误，<form>标签的有效作用范围被浏览器自动截断：
你的<form>起始标签写在class为title-title的div容器内部，但该div在仅包裹了菜名title输入框后就提前闭合。浏览器解析HTML时遇到这类嵌套错误，会自动补全未闭合的标签——也就是说浏览器会在title-titlediv闭合的位置，自动补上</form>闭合标签。
这直接导致后续的描述输入框、步骤列表容器、食材列表容器、图片上传控件、提交按钮，以及你通过JS动态创建的所有步骤、食材输入框，全部处于<form>标签范围外。表单提交时只会收集form标签内部的字段值，外部的动态输入项值自然不会被提交。
次要隐患是增删按钮的点击事件未阻止默认行为：
你的增删操作按钮都是<a href="#">标签，点击时默认会触发页面跳转到顶部锚点的行为，极端情况下会导致DOM操作被中断、页面意外刷新。

修复方法

调整HTML标签的闭合顺序，保证所有需要提交的表单项、提交按钮都被完整包裹在<form>标签内部，修正后的HTML结构如下：

<div class="form-container" id="form-container">
  <div class="title-title">
    <h3 class="recipe-pretitle">Recipe for</h3>
    <form action="/recipes/create" enctype="multipart/form-data" method="POST">
      <div>
        <label for="title">
          <input name="title" type="text" id="title" placeholder="Name of dish">
        </label>
      </div>
  </div>

  <div class="description-container">
    <label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
    <textarea name="description" id="description" cols="30" rows="5"></textarea>
  </div>

  <div class="directions-ingredients-container">
    <div id="product-directions">
      <div class="label-directions"><label for="directions">Cooking steps.</label></div>
      <div class="controls-ol-container">
        <div class="controls">
          <a href="#" id="add_more_fields"><i class="fa fa-sm">Add step</i></a>
          <a href="#" id="remove_fields"><i class="fa fa-sm">Remove last step</i></a>
        </div>
        <div class="instruction-list-container">
          <ol id="instruction-list"></ol>
        </div>
      </div>
    </div>

    <div class="ingredients-container">
      <div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
      <div class="controls-ol-container">
        <div class="controls">
          <a href="#" id="add_more_fields_ingredients"><i class="fa fa-sm">Add Ingredient</i></a>
          <a href="#" id="remove_fields_ingredients"><i class="fa fa-sm">Remove last Ingredient</i></a>
        </div>
        <div class="ingredient-list-container">
          <ol id="ingredient-list"></ol>
        </div>
      </div>
    </div>
  </div>

  <div class="imageInputContainer">
    <label id="image-label" for="image">Choose an image</label>
    <input name="image" type="file" id="image">
  </div>
  <div>
    <button type="submit">Upload</button>
  </div>
  </form>
</div>

给增删按钮的点击事件增加默认行为阻止逻辑，修正后的JS代码如下：

var add_more_fields = document.getElementById("add_more_fields")
var remove_fields = document.getElementById("remove_fields")
var instruction_list = document.getElementById('instruction-list')

add_more_fields.onclick = function (e) {
    e.preventDefault()
    var node = document.createElement("li")
    var newField = document.createElement('input')
    newField.setAttribute('type', 'text')
    newField.setAttribute('name', 'directions[]')
    newField.setAttribute('placeholder', 'Add Instruction')
    node.appendChild(newField)
    instruction_list.appendChild(node)
}

remove_fields.onclick = function (e) {
    e.preventDefault()
    var input_tags = instruction_list.getElementsByTagName('li')
    if (input_tags.length > 1) {
        instruction_list.removeChild(input_tags[(input_tags.length) - 1])
    }
}

var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
var ingredient_list = document.getElementById('ingredient-list')

add_more_fields_ingredients.onclick = function (e) {
    e.preventDefault()
    var node = document.createElement("li")
    var newField = document.createElement('input')
    newField.setAttribute('type', 'text')
    newField.setAttribute('name', 'Ingredients[]')
    newField.setAttribute('placeholder', 'Add Ingredient')
    node.appendChild(newField)
    ingredient_list.appendChild(node)
}

remove_fields_ingredients.onclick = function (e) {
    e.preventDefault()
    var input_tags = ingredient_list.getElementsByTagName('li')
    if (input_tags.length > 1) {
        ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
    }
}

补充说明：修复后可以在浏览器开发者工具的Elements面板中查看<form>标签的包裹范围，确认所有输入项都在form内部，提交时就可以正常拿到directions[]和Ingredients[]的数组格式参数了。

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