您的位置: 首页  >  IT文章  >  为了您的幸福，请不要把提交按钮的name或者id设置为submit

为了您的幸福，请不要把提交按钮的name或者id设置为submit

分类: IT文章 • 2024-09-16 18:48:19
为了你的幸福，请不要把提交按钮的name或者id设置为submit

折磨了我好多天的问题，一直很不甘心啊，还以为jquery.validationEngine.js有问题，还在它基础上自己写了个验证框架。结果阴沟里翻船，载在这么一个傻逼的问题上。以下为转载：

 

关于Html form表单的提交，很容易。。。但如果不仔细还是能有很多错误。

 

提交的button name 属性为 submit form的submit方法失效 。代码如下

Html代码  为了您的幸福，请不要把提交按钮的name或者id设置为submit
  1. <html>  
  2.     <head></head>  
  3.     <script type="text/javascript">  
  4.     function getData(){  
  5.         document.forms[0].submit();   
  6.     }  
  7.     </script>  
  8.     <body>  
  9.           
  10.         <form id="form1" name="form1" method="get" action="http://xiayuanfeng.iteye.com">  
  11.             <input type="button" name="submit" onclick="getData();" value="提交">  
  12.         </form>  
  13.       
  14.     </body>     
  15. </html>  

 如果改为

Html代码  为了您的幸福，请不要把提交按钮的name或者id设置为submit
  1. <html>  
  2.     <head></head>  
  3.     <script type="text/javascript" src="jquery.js"></script>  
  4.     <script type="text/javascript">  
  5.     function getData(){  
  6.         document.forms[0].submit();   
  7.     }  
  8.     </script>  
  9.     <body>  
  10.           
  11.         <form id="form1" name="form1" method="get" action="http://xiayuanfeng.iteye.com">  
  12.             <input type="button" name="aa" onclick="getData();" value="提交">  
  13.         </form>  
  14.       
  15.     </body>     
  16. </html>  

 成功提交。。

 我们来看看原因

Xml代码  为了您的幸福，请不要把提交按钮的name或者id设置为submit
  1. <html>  
  2.     <head></head>  
  3.     <script type="text/javascript" src="jquery.js"></script>  
  4.     <script type="text/javascript">  
  5.     function getData(){  
  6.         var objform = document.forms[0]  
  7.         for(var i in objform){  
  8.             if(i.indexOf("submit")!=-1){  
  9.                 alert(i+" ="+objform[i]);  
  10.             }     
  11.         }  
  12.     }  
  13.     </script>  
  14.     <body>  
  15.           
  16.         <form id="form1" name="form1" method="get" action="http://xiayuanfeng.iteye.com">  
  17.             <input type="text" name="aa">  
  18.             <input type="button" name="submit" onclick="getData();" value="提交">  
  19.         </form>  
  20.       
  21.     </body>     
  22. </html>  

  发现 submit已经变成 form 的一个属性了，并不是方法。这下明白了吧。把submit（也就是submit方法）覆盖了。所以要注意提交表单name的命名方式不要和form原有的方法，属性相同，这样会导致原来的form属性方法失效。

 

另外一篇，其实不只是IE：

这个不仅仅是IE6的错，而是所有IE的错！！
IE有一个特别随意的功能，就是能够通过Element的name来操作一个Element，有些人觉得这个功能很方便，实际它不仅不符合标准，还会导致IE自己变得莫名其妙。
假如你的Form有一个提交按钮的name="submit"，那么，很遗憾，你这个form无论如何都不能通过Javascript来提交，只要你一调用了这个form的submit()方法，IE就会告诉你它不支持这个方法！这不是搞笑吗？哪个浏览器会不支持form的submit()方法？虽然IE不标准，也不至于这样吧？对不起，就是这样。

因为当你调用form的方法submit()，它首先想到的是你的提交按钮！

theForm.submit()
这个语句在IE看来并不是调用theForm的submit方法，而是调用了名字为submit的提交按钮！如果你在某个元素对象后面加个括号，会有什么效果？当然就是出错。在IE的独特视角下，上面这个语句与下面这个语句的效果一样：
(theForm.submit)();
前一个括号代表了名称为submit的按钮对象，后面那个括号就无法理解了，所以IE告诉你不支持这个方法。

IE整个家族都是如此的丑陋！

相关推荐