通过JavaScript提交表单遇Uncaught TypeError错误的原因咨询

这个报错Uncaught TypeError: document.getElementById(...).submit is not a function的核心原因很明确：你的表单里存在一个name或id为"submit"的元素（大概率是提交按钮）。

浏览器有个默认行为：会把表单内所有带name/id的表单元素，作为属性挂载到表单DOM对象上。如果你的表单里有个元素叫submit，它就会直接覆盖表单原生的submit()方法——这时候你调用form.submit()时，实际上是在尝试调用那个表单元素（比如按钮），而不是原生的提交函数，自然就会抛出类型错误。

解决办法 #

你可以从两个方向处理：

1. 修改元素命名：把那个叫submit的按钮（或其他元素）的name和id改成别的名字，比如submitBtn，这样就不会和表单的原生方法冲突了。示例：

   <!-- 原来的错误写法 -->
   <input type="submit" name="submit" value="提交">
   
   <!-- 修改后 -->
   <input type="submit" name="submitBtn" id="submitBtn" value="提交">
   

2. 绕开属性覆盖调用原生方法：如果不想改元素名字，可以通过原型链直接调用原生的submit方法：

   const form = document.getElementById("theform");
   HTMLFormElement.prototype.submit.call(form);
   

   或者用现代浏览器支持的requestSubmit()方法（还会触发表单的验证逻辑，比原生submit更友好）：

   document.getElementById("theform").requestSubmit();
   

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