那些年我们踩过的坑之表单reset

最新推荐文章于 2020-07-05 12:34:30 发布

置顶 ib26nqt202

最新推荐文章于 2020-07-05 12:34:30 发布

阅读量796

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ib26nqt202/article/details/41142775

本文讲述了在使用表单reset功能时遇到的一个小陷阱：当表单中有名为'reset'的按钮时，会导致表单的reset方法失效。通过逐步排查，最终找到问题所在并给出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发者往往是在一个又一个的坑中成长起来的，自学的开发者尤其如此，刚刚填完一个坑，转身又掉进另一个坑。有些坑很容易就跳出来了，也有些坑能整了一天都没头绪，第二天早上一来发现后面就有一架通往坑外的梯子，坑爹啊，问题原来这么简单！

我今天就踩了一个比较坑的坑，好在花了几分钟就跳出来了。事情是这样的：

今天在做一个新增自定义假期的功能，用到了表单。页面上有个新增按钮，点击弹出一个层，里面就是表单，用的是ajax提交。当用户点击取消时（顺便吐槽一下，保存和取消按钮设计得实在是太丑了），清空表单数据，弹出层消失；当用户点击保存时，确认保存成功后，弹出层消失，清空表单数据。于是我把取消按钮做为reset按钮，大概代码是这样的：

%26lt;form method="post" name="addHoliday" id="addHolidayForm" %26gt;
　　// %26hellip;%26hellip;
    %26lt;input type="submit" name="saveHoliday" value="保存" /%26gt;
    %26lt;input type="reset" name="reset" value="取消" /%26gt;
%26lt;/form%26gt;

当用户点击新增按钮时，将上一次新增时填的数据清空，表单重置

$("#addHolidayForm")[0].reset();

这个时候浏览器报错了:

not a function ???

怎么会？难道是dom没选中？于是我alert出$("#addHolidayForm").attr("name")，得到%26ldquo;addHoliday%26rdquo;，dom选中了，可是问题出在哪？为了找出原因，我又用原生js试了一次

document.addHoliday.reset();

一样报错：TypeError: document.addHoliday.reset is not a function

于是我开始怀疑人生了。。。

于是我开始删除表单代码看到底是哪一行出了问题，很傻的办法。首先我删了保存和取消按钮，点击新增，表单重置成功了。。。

仔细一看，发现取消按钮的name值为reset，而表单重置方法也是reset，表单可以通过form.name来获取对应的表单元素，于是问题来了：学挖掘机%26hellip;%26hellip;额，于是问题出来了，很明显，从上面的结果可以看出来，document.addHoliday.reset得到的是name值为reset的input元素而非reset方法，自然就not a function。

by：王美建form：http://www.cnblogs.com/wangmeijian/