form.submit()提交时报错object is not a function
在写表单提交时遇到一个很扯淡的问题,分享一下。
比如有个表单,其中某元素的id为submit,像下面这样写:
<input id="submit" type="xxx" />
即,如果在表单某元素中,设置了一个id名为submit的元素, 然后在使用form.submit()进行提交表单时, 表单无动作,浏览器控制台中会提示一个js错误:
Uncaught TypeError: object is not a function
如果使用其它的id就正常了。
分析原因:
因为form.submit其实就是选中了
<input id="submit" ....>
这个对象(object), 所以会提示错误object is not a function。 可以在控制台中打印一下: console.log(form.submit);。
为什么这样呢?
因为form是一个HTMLCollection object, 可以从Interface HTMLDocument了解到。
而HTMLCollection object是a list of nodes(一个元素节点列表), 可以通过indexor(索引)、id 或 元素的name来引用这些节点。
所以,郑晓觉得,造成最初object is not a function的原因,可能是form.submit的这个节点元素对象,把form的submit方法覆盖了。id名和submit方法冲突后,将form.submit认作是操作了id为submit的这个元素。
所以在我们编写代码时,为了确保万无一失,变量和函数命名除了要回避系统和语言明确规定的保留关键字以外,还应该尽量避免使用那些如submit这种HTML以及其他标记中的关键字,否则说不定在什么地方就会有冲突,查找起来也会很麻烦。业界广泛采用的办法就是骆驼式和前缀式,就是在变量名之前加上自己姓名的首拼缩写,如bf_varname,以及使用变量名单词首字母大写等,尤其是在团队开发时,是很有必要的,不仅有助于程序员之间的理解,避免冲突,还可以找到相关的负责人。