jQuery：同一页面两个相同表单的独立提交方法问询

嘿，这个问题其实很好搞定！核心就是让你的提交逻辑能精准定位到当前被提交的那个表单，而不是把所有表单当成一个整体处理。不需要给每个表单写重复的逻辑，下面两种方法都很简洁：

方法1：直接绑定到每个表单，用事件上下文定位 #

这是最直接的方案，甚至不用改你的HTML结构。我们给每个表单单独绑定提交事件，然后在处理函数里用this（或者事件对象）拿到当前触发提交的表单：

// 选中页面上所有的表单，逐个绑定提交事件
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function(e) {
    e.preventDefault(); // 先阻止默认的页面跳转
    
    // 只获取当前表单里的邮箱输入值
    const emailInput = this.querySelector('input[type="email"]');
    const userEmail = emailInput.value;
    
    // 这里写你的提交逻辑，比如发请求、验证等
    console.log('要提交的邮箱:', userEmail, '来自这个表单:', this);
  });
});

这里的this就指向当前被提交的那个表单，所以每个表单的输入值都会被单独处理，完全不会互相干扰。

方法2：事件委托（适合动态表单场景） #

如果你的表单是后续通过JS动态添加到页面的，用事件委托更高效——只需要给父容器绑定一次事件，不管加多少表单都能生效：

// 假设两个表单都在一个父容器里（比如id是form-wrapper的div）
document.getElementById('form-wrapper').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // 确认触发事件的是表单元素
  if (e.target.tagName === 'FORM') {
    const email = e.target.querySelector('input[type="email"]').value;
    console.log('提交的邮箱:', email, '来自表单:', e.target);
    // 执行你的提交逻辑
  }
});

这种方式不用逐个给表单绑定事件，性能更好，也适合动态生成的表单场景。

为啥不用单独写两套处理逻辑？ #

完全没必要！你只需要让同一个处理函数能识别当前触发的表单实例就行。之前的问题大概率是你用了document.querySelector('form')这种全局选择器——它只会拿到页面上的第一个表单，所以两个表单提交时都会用第一个的值。只要换成通过事件上下文定位当前表单，问题就解决了。

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