JS循环绑定表单提交处理器报错：Uncaught TypeError 如何修复？

错误核心原因：给表单onsubmit事件赋值时，错误地直接执行了handleSubmit函数，而非绑定函数引用。

你的代码中forms[i].onsubmit = handleSubmit(event);这一行，会在页面加载的循环过程中立即调用handleSubmit，此时没有真实的表单提交事件触发，event参数为undefined，因此触发Cannot read properties of undefined (reading 'preventDefault')错误。

修复方案 #

方案1：修正原有事件赋值方式

只需去掉函数调用的括号和event参数，将函数本身赋值给onsubmit：

(function() {
  var handleSubmit = function (event) {
    event.preventDefault();
  
    var myForm = event.target;
    var formData = new FormData(myForm);
    
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    })
      .then(() => console.log("Form successfully submitted"))
      .catch((error) => alert(error));
  };
  
  var forms = document.getElementsByTagName('form');
  
  for(var i = 0; i < forms.length; i++) {
    // 仅传递函数引用，不立即执行
    forms[i].onsubmit = handleSubmit;
  }
})();

方案2：推荐使用addEventListener绑定事件

这种方式更灵活，支持为同一个事件绑定多个处理函数：

(function() {
  var handleSubmit = function (event) {
    event.preventDefault();
  
    var myForm = event.target;
    var formData = new FormData(myForm);
    
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    })
      .then(() => console.log("Form successfully submitted"))
      .catch((error) => alert(error));
  };
  
  var forms = document.getElementsByTagName('form');
  
  for(var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', handleSubmit);
  }
})();

额外说明 #

你代码中用FormData配合application/x-www-form-urlencoded类型，通过new URLSearchParams(formData).toString()处理请求体的逻辑是正确的，无需修改。

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