JavaScript点击提交时如何获取ID未知的动态表单字段值

核心思路：放弃依赖固定ID取单个字段的思路，动态渲染表单时给控件预埋统一标识，提交时批量遍历取值，适配任意数量、任意ID的动态题目。

渲染阶段预埋标识 #

后端返回题目数据渲染表单时，给每一个答题控件（输入框、单选框、多选框、下拉选择器、文本域等）统一加两个标记：

• 统一类名answer-control，方便批量选中所有答题元素
• 自定义属性data-qid，值直接绑定当前题目的questionId

渲染完成的控件示例：

<!-- 单选题 -->
<label><input type="radio" class="answer-control" name="q_1002" data-qid="1002" value="Yes">是</label>
<label><input type="radio" class="answer-control" name="q_1002" data-qid="1002" value="No">否</label>

<!-- 文本输入题 -->
<input type="text" class="answer-control" data-qid="1003" placeholder="请输入补充内容">

这种写法完全不依赖控件的固定ID，哪怕后续题目顺序调整、新增删减题目，标识都跟着控件走，不会出错。

提交阶段批量取值组装 #

提交时直接选中所有带answer-control类的控件，按控件类型分别取值，自动组装成要求的结构，原生JS和jQuery都可以实现：

原生JS实现 #

function collectAnswers() {
  const answerMap = new Map();
  // 拿到所有答题控件
  const controls = document.querySelectorAll('.answer-control');

  controls.forEach(ctrl => {
    const qid = Number(ctrl.dataset.qid);
    let val = null;

    // 按控件类型处理取值逻辑
    if (ctrl.type === 'radio') {
      // 单选框只取选中项的值
      if (ctrl.checked) val = ctrl.value;
    } else if (ctrl.type === 'checkbox') {
      // 多选框把选中值拼成数组
      if (ctrl.checked) {
        const oldVal = answerMap.get(qid)?.response || [];
        val = Array.isArray(oldVal) ? [...oldVal, ctrl.value] : [ctrl.value];
      }
    } else {
      // 输入框、下拉、文本域直接取去空格后的值
      val = ctrl.value.trim();
    }

    // 过滤空值，存入结果集
    if (val !== null && val !== '') {
      answerMap.set(qid, {
        questionId: qid,
        response: val
      });
    }
  });

  // 输出要求的结构
  return {
    answers: Array.from(answerMap.values())
  };
}

// 提交时直接调用即可
// const submitData = collectAnswers();
// 后续调用接口传submitData就行

jQuery实现 #

function collectAnswers() {
  const answerMap = new Map();
  $('.answer-control').each(function() {
    const $ctrl = $(this);
    const qid = Number($ctrl.data('qid'));
    let val = null;

    if ($ctrl.is(':radio')) {
      if ($ctrl.is(':checked')) val = $ctrl.val();
    } else if ($ctrl.is(':checkbox')) {
      if ($ctrl.is(':checked')) {
        const oldVal = answerMap.get(qid)?.response || [];
        val = Array.isArray(oldVal) ? [...oldVal, $ctrl.val()] : [$ctrl.val()];
      }
    } else {
      val = $ctrl.val().trim();
    }

    if (val !== null && val !== '') {
      answerMap.set(qid, { questionId: qid, response: val });
    }
  });

  return { answers: Array.from(answerMap.values()) };
}

注意事项 #

• 不要靠控件name、DOM层级关系硬解析题目ID，自定义data属性是兼容性、可维护性最高的方案，后续调整表单布局也不会影响取值逻辑
• 多选题不要直接赋值，要做数组拼接，避免后选中的选项覆盖之前的值
• 如果要做必填校验，遍历取值的同时就可以判断对应题目值是否为空，不用重复遍历DOM

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