button按钮无法提交表单问题发现与解决-创新互联

 前些天，我在用html制作登录框时遇到一个问题，form表单中的button不能提交表单中的数据。

创新互联专注于雄县企业网站建设,响应式网站开发,商城网站建设。雄县网站建设公司,为雄县等地区提供建站服务。全流程按需定制设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

 相信你知道，input的type="submit"有提交表单的功能，当然，我们自己也可以给一个input的type="button"的按钮自定义点击事件以提交表单。

 在这里我不用submit而用自定义的button的原因是，submit是无条件提交表单，而登录框需要对用户输入进行判断，自定义的button能实现在满足判断条件后才提交表单。

---

 以上，题外话，下面进入正题，我的button为什么不能提交表单？请看代码：

    
    
    
        window.onload=function(){
            var btn=document.getElementById('submit');
            var form=document.getElementsByTagName('form')[0];
            btn.onclick=function(){
                form.submit();
            }
        }
    


    
    
        
    

 原本应该是这样：我在输入框中随便打几个字，然后点击提交按钮，我的浏览器页面就向"www.baidu.com"提交一对键值对数据。

 当我点击“提交”按钮，然而并没有什么反应。

---

 各种百度，各种搜贴，发现根本没人发现这个问题。找了好久，终于在一个老外的帖子中看到回复说是因为button取名为submit导致无法使用。

 为了验证，我把button的id名改了，然后发现问题完美解决。

    
    
    
        window.onload=function(){
            var btn=document.getElementById('btn');
            var form=document.getElementsByTagName('form')[0];
            btn.onclick=function(){
                form.submit();
            }
        }
    


    
    
        
    

 表单提交了，给百度穿了个"name=啊"的数据，如下图：

---

 后来，我又测试name属性，把button的id去掉，而是添加name属性并赋值"submit"。神奇，发现button又不能提交表单了。

    
    
    
        window.onload=function(){
            var btn=document.getElementsByName('submit');     //通过name属性找到按钮元素
            var form=document.getElementsByTagName('form')[0];
            btn.onclick=function(){
                form.submit();       //调用表单的提交方法
            }
        }
    


    
    
        
    

 至此，问题的原因找到了。

---

 总结：不能提交的原因是：button的id是“submit”，导致了提交表单功能的失效。按F12，控制台报错了：Uncaught TypeError: form.submit is not a function 。问题的根源在于，对form中的button命名submit，这个名字和form的提交表单方法submit()名字重复了，这就导致了系统无法识别submit()这个方法，所以它不执行了。

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：button按钮无法提交表单问题发现与解决-创新互联
分享路径：http://shouzuofang.com/article/jiegs.html