视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
如何解决表单重置resetisnotafunction出错
2020-11-27 20:12:02 责编:小采
文档


实际上很久之前遇到过一回,结果最近开发又遇到这个Bug,而且也折腾了我一些时间,比如说我在利用Ajax提交表单后,需要重置表单各项内容从交互上来避免用户重复提交,正常的表单HTML结构如下所示:

<form action="" method="post" id="LoginForm">
 <input type="text" name="username" value="" />
 <input type="password" name="password" value="" />
 <input type="submit" id="submit" name="submit" value="Login" />
 <input type="reset" id="reset" name="reset" value="Reset" />
</form>

如果单纯需要采用JavaScript来重置,可以采用 document.getElementById('LoginForm').reset() 来实现,使用jQuery则使用$('#LoginForm')[0].reset() 或者 $('#LoginForm').trigger("reset") ,但是对于上述以HTML设计的表单来说,这些reset表单的方法均失效了!FireBug调试提示...reset is not a function ,这里问题出在哪里了呢?有时候你永远想不到一个小小的坏习惯会带来相当的麻烦,在纠结许久后搜索网络,在stackoverflow找到了答案。原来问题出在了reset按钮上,我们把reset按钮实现的HTML聚焦一下:

<input type="reset" id="reset" name="reset" value="Reset" />

问题就在于id="reset"name="reset",这里的reset属性覆盖了原来的reset方法,自然无法调用并提示is not a function,解决的办法也很简单,避免用reset关键词来命名reset按钮的nameid属性。比如下面的命名方式则比较保险:

<input type="reset" id="ResetButton" name="ResetButton" value="Reset" />

好了,一个由命名带来的小问题就这么解决了,这时我注意到了submit按钮,其id="submit"并且name="submit",会不会导致form表单的submit()方法失效呢?由于我采用的是Ajax方式提交所以这个问题也没有深究,或许把id="submit"name="submit"也改成不同的名字,比如id="SubmitButton"name="SubmitButton"会比较好吧。

下载本文
显示全文
专题