zoukankan      html  css  js  c++  java
  • 那些年我们踩过的坑之表单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/

  • 相关阅读:
    A1023 Have Fun with Numbers [大整数乘法]
    大整数的四则运算
    A1096 Consecutive Factors [因子分解]
    A1078 Hashing [质数和散列结合]
    A1015 Reversible Primes [质数问题]
    又谈进制转换
    A1088 Rational Arithmetic [分数四则运算]
    A1081 Rational Sum [分数计算]
    linux主流系统配置静态ip
    主机ping虚拟机请求超时,虚拟机ping主机正常ping通导致ssh连接问题
  • 原文地址:https://www.cnblogs.com/wangmeijian/p/4098323.html
Copyright © 2011-2022 走看看