因为业务原因,在html页面中动态生成了多个表单。需要动态的通过jQuery或js方法来重置表单元素的值。
通过搜索发现,jQuery中是没有reset()方法来实现重置功能的,不过可以通过调用 DOM 中的reset方法来重置表单。
一、重置表单的方法
1.1 jQuery间接实现:
$('#表单ID')[0].reset();
1.2 通过DOM方法实现:
document.getElementById("表单ID").reset();
1.3 直接遍历表单元素置空:
$("input").val("");
二、举例:
<!doctype html> <html lang="en"> <head> <title>重置表单</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="plugins/jquery/jquery.min.js"></script> </head> <body> <form id="myForm"> 姓名:<input type="text" size="20"><br/> 年龄:<input type="text" size="20"><br/> <br/> <input type="button" οnclick="formReset1()" value="js重置"> <input type="button" οnclick="formReset2()" value="jQuery重置"> </form> </body> <script type="text/javascript"> function formReset1() { document.getElementById("myForm").reset() } function formReset2() { $("#myForm")[0].reset() } </script> </body> </html>
以上两种方式,都可以实现表单重置功能。