表单清空
【前言】
很多同学经常犯得一个错误:清空表单时用的jquery控制,却忘了将jquery对象转化为Dom对象。
混用了JS方法和JQuery对象.............
这会导致浏览器报错,无法清空表单
Uncaught TypeError: $(...).reset is not a function 翻译为:未捕获的类型错误:$(...)重置不是一个功能
【主体】
先看下问题代码
<form action="" method="post"> <fieldset> <legend>添加职员</legend> <p><label for="username">用户名:</label><input type="text" name="username" id="username"></p> <p><label for="password">密码:</label><input type="text" name="password" id="password"></p> <p><label for="nickname">姓名:</label><input type="text" name="nickname" id="nickname"></p> <p><label for="truename">全称:</label><input type="text" name="truename" id="truename"></p> <p>所属部门: <select name="dept_id"> <foreach name="data" item="fo"> <option value="{$fo.id}">{$fo.name}</option> </foreach> </select> </p> <p> 性别: <label for="man">男</label><input type="radio" name="sex" value="1" id="man"> <label for="woman">女</label><input type="radio" name="sex" value="2" id="woman"> </p> <p><label for="birthday">生日:</label><input type="text" name="birthday" id="birthday"></p> <p><label for="tel">联系电话:</label><input type="text" name="tel" id="tel"></p> <p><label for="email">邮箱:</label><input type="text" name="email" id="email"></p> <p><label for="remark">备注:</label><textarea name="remark" id="remark"></textarea></p> <p> <a href="javascript:;" id="submitBtn">提交</a> <a href="javascript:;" id="resetBtn">清空</a> </p> </fieldset> </form> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#submitBtn').on('click',function(){ $('form').submit(); }); $('#resetBtn').on('click',function(){ $('form').reset(); }); }); </script>
注意:这里的$('form')是jquery对象,而reset()是js方法,无法直接操作。
所以需要先将jquery转为js的dom进行操作
将标红处改为
$('form')[0].reset(); 或者 $('form').get(0).reset();
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17