【前言】
很多同学经常犯得一个错误:清空表单时用的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();