form clear

【Foreword】 

      Many students often make a mistake: they use the jquery control to clear the form, but forget to convert the jquery object into a Dom object.

      Mixed use of JS methods and JQuery objects............

      This will cause the browser to report an error, unable to clear the form

Uncaught TypeError: $(...).reset is not a function
translates to: Uncaught TypeError: $(...) reset is not a function

 

 

【main body】

First look at the problem code

<form action="" method="post">
	<fieldset>
		<legend>Add staff</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>Department:
			<select name="dept_id">
				<foreach name="data" item="fo">
					<option value="{$fo.id}">{$fo.name}</option>
				</foreach>
			</select>
		</p>
		<p>
			gender:
			<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>

    Note: $('form') here is a jquery object, and reset() is a js method, which cannot be directly manipulated.

               So you need to convert jquery to js dom for operation

               Change the marked red to

$('form')[0].reset();
or
$('form').get(0).reset();