如何将动态创建的input字段值写入Vidpovid变量？

要把所有动态/静态number输入框的值同步到Vidpovid变量（对应页面的隐藏输入框），可以按以下方式修改代码：

1. 新增值同步函数 #

添加一个专门收集输入值并更新目标字段的函数，它会遍历所有number类型输入框，整理有效值后写入隐藏字段：

function updateVidpovid() {
  // 选中所有number类型的输入框
  const numberInputs = document.querySelectorAll('input[type="number"]');
  // 收集非空的输入值，整理成数组
  const values = Array.from(numberInputs)
    .map(input => input.value.trim())
    .filter(val => val !== '');
  
  // 找到隐藏字段，将值以JSON字符串格式存入（方便后端解析）
  const vidpovidInput = document.querySelector('input[asp-for="Less_Check.Vidpovid"]');
  vidpovidInput.value = JSON.stringify(values);
}

2. 给输入框绑定事件 #

• 页面加载完成后，给初始输入框绑定输入事件，同时初始化一次值：

// 页面就绪后执行
document.addEventListener('DOMContentLoaded', function() {
  const initialInput = document.getElementById('1');
  initialInput.addEventListener('input', updateVidpovid);
  
  // 初始化同步一次值
  updateVidpovid();
});

• 修改createNewInput函数，创建新输入框时立即绑定事件：

let id = 2;

function createNewInput() {
  let addNewInput = true;

  for(let i = 1; i < id; i++) {
    if(document.getElementById(i).value === "") {
      addNewInput = false;
      break; // 找到空值就停止循环，优化性能
    }
  }

  if(addNewInput) {
    let baseList = document.getElementById('base-list')
    let newInput = document.createElement("input");
    newInput.setAttribute("type", "number");
    newInput.setAttribute("class", "form-control");
    newInput.setAttribute("id", id);
    
    // 给新输入框绑定同步事件
    newInput.addEventListener('input', updateVidpovid);
    
    id++;
    baseList.append(newInput);
    baseList.append(document.createElement("br"));
  } else {
    alert("error");
  }
}

补充说明 #

• 用JSON.stringify把数值数组转为字符串存储，后端接收后可通过JSON.parse还原为数组，便于处理多值场景。
• 输入框的input事件会在用户输入时实时触发同步，确保Vidpovid的值始终与输入内容一致。
• 优化了原循环逻辑，找到空值后立即终止循环，提升运行效率。

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