多表单存在同名class时，如何获取对应表单内的元素？

核心问题 #

你的代码存在三个关键问题，导致无法正确获取表单内的元素：

• document.getElementById() 接收的是纯id字符串，但你传了带#的选择器（比如#productId_1），这会直接返回null
• 第三个表单的id位置错误：你把id="productId_3"写在了外层<div>上，而非<form>标签，导致无法通过id选中目标表单
• 事件监听代码重复冗余，没必要为每个表单单独编写监听逻辑

修复后的代码 #

HTML 修正

将第三个表单的id移到<form>标签上，同时清理div重复的class属性：

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_3">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

JavaScript 修正

优化事件监听逻辑，同时修正元素选择的错误，还可以直接通过事件对象获取当前提交的表单，无需传递id：

document.addEventListener("DOMContentLoaded", () => {
  // 一次性选中所有product类的表单，批量添加监听
  const productForms = document.querySelectorAll(".product");
  productForms.forEach(form => {
    form.addEventListener("submit", e => {
      e.preventDefault();
      // 直接把当前表单元素传给productList，不用传id
      productList(form);
    });
  });
});

function productList(form) {
  // 直接在传入的表单元素内查找目标隐藏输入框
  const productInput = form.querySelector(".productId");
  // 获取隐藏输入框的实际值
  const productValue = productInput.value;
  alert(`表单ID：${form.id}，产品值：${productValue}`);
  
  // 这里可以把productValue追加到你的目标数组中
  // 示例：productArray.push(productValue);
}

额外优化说明 #

• 用querySelectorAll批量选中表单，避免重复代码，后续新增表单无需修改JS逻辑
• 直接通过事件对象获取当前提交的表单，比传递id更高效可靠
• 用querySelector替代getElementsByClassName，语法更简洁，直接返回目标单个元素（无需加[0]）

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