表单元素命名需要注意的一个地方：不要使用与form属性同名的name或id

最近做官方点充值入口的时候遇到个奇怪的问题。

直接上代码： <form id="myForm" name="myForm" method="post" action=""> 用户名： <input type="text" name="name" id="textfield" /> 密码 : <input type="password" name="password" id="textfield" /> <input type="submit" name="submit" id="submit" value=" 提交 " /> <input type="button" οnclick="doSubmit()" value="js 提交 " /> </form> <mce:script type="text/javascript"><!-- function doSubmit(){ document.myForm.submit(); } // --></mce:script> 点击按钮“ JS 提交”报错。

记得以前也遇到过这样的问题，当时的做法是一条路走不通，换一条路，比如用js将表单转换成url参数来传递，换一中方法，解决问题就好，没有去“挖”一下其中的原因，而是将问题归结于浏览器本身的bug和js的诡异性。其实轻只有去“挖”一下就能找到其中的原因，避免以后再犯。

 

看代码： alert(document.myForm.submit.value); 结果： 提交 狂汗~~~~~~~~~~~~

原因已经很明显了，document.myForm.submit获取到的是<input type="submit" name="submit" id="submit" value="提交" />这个元素，而不是from的submit函数。

由此我们需要注意了，不要给表单的元素取name="submit"或者id="submit"。否则就会出现form.submit()函数不可用！

同样道理，请注意最好不要使用method，action等与form属性同名的name或id。

 

在此感谢tenfy 协助解决问题！