JavaScript中使用编程式触发表单提交时Console控制台报错：document.getElementById(...).submit is not a function

最新推荐文章于 2022-09-23 11:22:49 发布

Bitter_coffee_

最新推荐文章于 2022-09-23 11:22:49 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript html java js web

本文链接：https://blog.csdn.net/Bitter_coffee_/article/details/105924822

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript中使用编程式触发表单提交时Console控制台报错：

分析：

这个错误的信息应该是比较明显的
Uncaught TypeError: document.getElementById(…).submit is not a function
注意错误提示信息有一个submit，说明是DOM对象的submit方法的问题
如果错误提示信息也是这样的，那么这篇博客应该对你有所帮助；
往下看

错误示例

注：此代码为简单的演示没有过多的逻辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form</title>
	</head>
	<body>
		
		<form action="https://www.baidu.com" id="f">
			
			账号：<input type="text" name="username" id="username" value="" /><br />
			密码：<input type="text" name="password" id="password" value="" /><br />
			<!--
            	作者：39052795@qq.com
            	时间：2020-05-04
            	描述：	
            -->
			<input type="button" id="mit" name="submit" value="登录" />
					
		</form>
		
		<script type="text/javascript">
			// 使用编程式触发表单条件完成表单校验
			window.onload = function() {
				// 给button按钮登录绑定上 click事件
				var submitDom = document.getElementById("mit");
				
				submitDom.onclick = function () {
					//获取值 对比返回
					var usernameDom = document.getElementById("username");
					var passwordDom = document.getElementById("password");
					if (usernameDom.value.trim().length > 0 && passwordDom.value.trim().length > 0) {
						document.getElementById("f").submit();
					} else {
						alert("用户名和密码不能为空");
					}
				}
			}
		</script>
	</body>
</html>

原因：

表单里面不能有name="submit"的元素，否则在提交的时候，该对象会和submit();方法发生混淆造成该错误!!

总结：

一般是button按钮的name属性值和id属性值写成了submit
即使是定义了button按钮的name属性值为submit而并没有使用此属性也是不行的！！
注意：是整个form表单！！当表单…中含有name=”submit”时，提交时就会有冲突，这个错误常见于按钮上

解决：在使用编程式触发表单提交时，属性值要避免为submit

附：详细错误截图
在这里插入图片描述

Bitter_coffee_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中使用编程式触发表单提交时Console控制台报错：document.getElementById(...).submit is not a function

Uncaught TypeError: document.getElementById(...).submit is not a function编程式触发表单提交完成表单校验
复制链接

扫一扫