求助：无法获取foreach循环中输入框的动态值到JavaScript函数

架构老林

2026-5-6

解决循环生成重复ID输入框的取值问题

兄弟，你遇到的问题根源特别明确：HTML 规范要求 id 属性必须是全局唯一的，你用 @foreach 循环生成了多个 id="mar1bags" 的输入框，浏览器只会识别第一个匹配的元素，这就是为啥 getElementById 只能拿到第一个值，还会抛出重复 ID 的警告。

给你几个实用的解决方案，一步步来：

1. 替换重复 ID，改用 Class + 数组式 Name

先修改循环里的输入框代码，把重复的 id 去掉，换成统一标识的 class，同时把 name 改成数组格式（方便后端接收批量数据）：

@foreach(...)
  <input class="form-control mar1bags-input" name="mar1bags[]" value="">
@endforeach

2. 在 JavaScript 中获取所有输入框的值

用 document.querySelectorAll() 选中所有带 mar1bags-input 类的输入框，然后遍历拿到每个值：

// 获取所有目标输入框
const mar1Inputs = document.querySelectorAll('.mar1bags-input');

// 把 NodeList 转成数组，再提取每个输入框的值
const allValues = Array.from(mar1Inputs).map(input => input.value.trim());

// 现在 allValues 就是所有输入框的值组成的数组啦
console.log('所有输入值:', allValues);

3. 事件处理优化（可选）

如果需要给这些输入框绑定事件（比如实时校验、输入监听），推荐用事件委托，不用给每个输入框单独绑定，性能更好：

// 假设这些输入框的父容器 ID 是 `data-form`
document.getElementById('data-form').addEventListener('input', function(e) {
  // 判断触发事件的元素是目标输入框
  if (e.target.classList.contains('mar1bags-input')) {
    // 处理当前输入框的逻辑，比如打印当前值
    console.log('当前输入框值:', e.target.value);
  }
});