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

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

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

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

　　// ……

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

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

这个时候浏览器报错了:Box objectBox-errorMessage hasBreakSwitch " style="color: #ff0000;">

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

document.addHoliday.reset();

一样报错：Box objectBox-errorMessage hasBreakSwitch " style="color: #ff0000;">TypeError: document.addHoliday.reset is not a function

Box objectBox-errorMessage hasBreakSwitch " style="color: #000000;">于是我开始怀疑人生了。。。

Box objectBox-errorMessage hasBreakSwitch " style="color: #000000;">于是我开始删除表单代码看到底是哪一行出了问题，很傻的办法。首先我删了保存和取消按钮，点击新增，表单重置成功了。。。

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

by： from：http://www.cnblogs.com/wangmeijian/

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。