前些天,我在用html制作登录框时遇到一个问题,form表单中的button不能提交表单中的数据。
相信你知道,input的type="submit"有提交表单的功能,当然,我们自己也可以给一个input的type="button"的按钮自定义点击事件以提交表单。
在这里我不用submit而用自定义的button的原因是,submit是无条件提交表单,而登录框需要对用户输入进行判断,自定义的button能实现在满足判断条件后才提交表单。
以上,题外话,下面进入正题,我的button为什么不能提交表单?请看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById('submit');
var form=document.getElementsByTagName('form')[0];
btn.onclick=function(){
form.submit();
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<input type="text" name="name" />
<input id="submit" type="button" value="提交" />
</form>
</body>
</html>
原本应该是这样:我在输入框中随便打几个字,然后点击提交按钮,我的浏览器页面就向"www.baidu.com"提交一对键值对数据。
当我点击“提交”按钮,然而并没有什么反应。
各种百度,各种搜贴,发现根本没人发现这个问题。找了好久,终于在一个老外的帖子中看到回复说是因为button取名为submit导致无法使用。
为了验证,我把button的id名改了,然后发现问题完美解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById('btn');
var form=document.getElementsByTagName('form')[0];
btn.onclick=function(){
form.submit();
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<input type="text" name="name" />
<input id="btn" type="button" value="提交" />
</form>
</body>
</html>
表单提交了,给百度穿了个"name=啊"的数据,如下图:
后来,我又测试name属性,把button的id去掉,而是添加name属性并赋值"submit"。神奇,发现button又不能提交表单了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByName('submit'); //通过name属性找到按钮元素
var form=document.getElementsByTagName('form')[0];
btn.onclick=function(){
form.submit(); //调用表单的提交方法
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<input type="text" name="name" />
<input name="submit" type="button" value="提交" />
</form>
</body>
</html>
至此,问题的原因找到了。
总结:不能提交的原因是:button的id是“submit”,导致了提交表单功能的失效。按F12,控制台报错了:Uncaught TypeError: form.submit is not a function 。问题的根源在于,对form中的button命名submit,这个名字和form的提交表单方法submit()名字重复了,这就导致了系统无法识别submit()这个方法,所以它不执行了。
延伸:在编写代码时,我们应该注意命名的规范,应该与原生语言的保留字、关键字区分开。