那些年我们踩过的坑之表单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/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!