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
附:详细错误截图