如何用原生JavaScript实现jQuery获取最近表单指定name元素值的功能？

原jQuery代码的核心逻辑是：点击.add-to-cart-btn按钮时，先定位按钮最近的父级<form>元素，再在该表单内找到name="id"的隐藏input，最后获取它的值。你的原生JS代码存在几个关键问题导致功能失效：

存在的问题 #

• 参数命名非法：this是JavaScript的关键字，不能用作函数参数名，这么写会直接触发语法错误。
• 选择器匹配错误：原需求要找的是name="id"的input，你写的是[name="related_id"]，完全不符合需求。
• 逻辑偏差：原jQuery逻辑是先找最近的父级form，再在form内部查找input；你直接用this.querySelector是在按钮自身的子元素里搜索，完全偏离了原逻辑。
• 缺少事件绑定：只定义了函数，但没有说明如何将函数绑定到按钮的点击事件上，这也是功能无响应的原因之一。

正确的原生JS实现 #

方式1：JS动态绑定事件（推荐） #

这种方式不需要修改HTML，适合批量处理按钮：

// 获取所有目标按钮
const addToCartBtns = document.querySelectorAll('.add-to-cart-btn');

// 给每个按钮绑定点击事件
addToCartBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到最近的父级form元素
    const form = this.closest('form');
    if (!form) return; // 没找到form就终止，避免后续报错
    
    // 在form内定位目标隐藏input
    const variantIdInput = form.querySelector('input[type="hidden"][name="id"]');
    if (variantIdInput) {
      const qualifyingProductVariantId = variantIdInput.value;
      alert(qualifyingProductVariantId); // 测试用，可替换为你的业务逻辑
    }
  });
});

方式2：HTML内直接绑定点击事件 #

如果需要直接在HTML里绑定事件，函数可以这么写：

<!-- HTML部分 -->
<button class="add-to-cart-btn" onclick="getVariant(this)">加入购物车</button>

// JS部分
function getVariant(btn) {
  // 查找最近的父级form
  const form = btn.closest('form');
  if (!form) return;
  
  // 定位目标隐藏input
  const variantIdInput = form.querySelector('input[type="hidden"][name="id"]');
  if (variantIdInput) {
    const qualifyingProductVariantId = variantIdInput.value;
    alert(qualifyingProductVariantId);
  }
}

关键说明 #

• element.closest('form')：和jQuery的closest('form')行为完全一致，会从当前元素开始向上查找最近的匹配<form>的祖先元素（包括元素自身）。
• 加入空值判断：避免找不到form或input时出现报错，让代码更健壮。

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