表单清空

【前言】 

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