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

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

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

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

<form method="post" name="addHoliday" id="addHolidayForm" >
　　// ……
    <input type="submit" name="saveHoliday" value="保存" />
    <input type="reset" name="reset" value="取消" />
</form>

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

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

这个时候浏览器报错了:

not a function ???

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

document.addHoliday.reset();

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

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

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

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

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