button按钮无法提交表单问题发现与解决

前些天，我在用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.οnlοad=function(){var btn=document.getElementById('submit');var form=document.getElementsByTagName('form')[0];btn.οnclick=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.οnlοad=function(){var btn=document.getElementById('btn');var form=document.getElementsByTagName('form')[0];btn.οnclick=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.οnlοad=function(){var btn=document.getElementsByName('submit');     //通过name属性找到按钮元素var form=document.getElementsByTagName('form')[0];btn.οnclick=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()这个方法，所以它不执行了。

延伸：在编写代码时，我们应该注意命名的规范，应该与原生语言的保留字、关键字区分开。

转载于:https://blog.51cto.com/webexp/1830564

button按钮无法提交表单问题发现与解决相关推荐

前端问题：button按钮在form表单的时候会当成submit提交
button按钮在form表单的时候会当成submit提交 input type="button" PS:遇到了一个坑是,button按钮在form表单的时候会当成submit提交 ...
html把保留图片改为提交按钮,如何制作图片按钮，并为图片按钮添加提交表单和重置表单功能...
网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮. 今天中国在一.图片按钮的制作方法 1. 定义图像形式的提交按钮. 2.用CSS把图片设为按钮的背景 3.作用,设置其bac ...
form表单按下提交按钮无法提交表单的问题
最近用bootstrap写一个项目,用到表单,然后提交表单的时候,按钮<input type="submit" value="提交"/>一直触发不了 ...
为什么一点onclick按钮就提交表单？
下面是一个表单,有一个onclick按钮,点击后上面文本框的内容被添加到下面的文本域中,并可以一直添加,然后点击submit后提交到另一个页面.但是,在Ie9或者火狐浏览器中我一点onclick为什么 ...
button和sumbit提交表单的区别
最新弄了个asp的软件,提交表单有点生疏了,下面总结了一下通过button和sumbit两种方式来提交表单: sumbit提交表单 <meta http-equiv="Content- ...
layui中如果button按钮在form表单外面如何提交
HTML部分: <div><form class="layui-form" lay-filter="addForm" method=" ...
button按钮提交表单问题
form表单里有个Button按钮,非submit类型,但点击按钮会提交表单 <button id="btnCnfm" class="btn btn-info bt ...
如何防止按钮提交表单
在下一页中,使用Firefox,"删除"按钮提交表单,但"添加"按钮不提交. 如何防止"删除"按钮提交表单? <html> &l ...
input type=submit 和button的区别及表单提交
在一个页面上画一个按钮,有四种办法: 1 <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生. ...

button按钮无法提交表单问题发现与解决

button按钮无法提交表单问题发现与解决相关推荐

最新文章

热门文章