jquery js 重置表单 reset()具体实现代码

当我们提交完表单后，有时需要将表单中的输入框内容清空，这个时候可以使用jquery js 的reset()方法来重置表单。

1. 重置表单的实现步骤

要使用reset()方法，需要先获取表单元素，并将其绑定到一个事件处理函数中。

代码实现步骤如下：

1. 获取表单元素

var form = $('#formId');

1. 获取重置按钮

var resetBtn = $('#resetBtn');

1. 给重置按钮绑定点击事件，点击按钮时触发表单重置功能

resetBtn.click(function(){
    //重置表单
    form[0].reset();
});

在代码中，form[0]表示获取表单的第一个元素，因为jquery获取的表单元素可能有多个，这里只需要获取第一个即可。

完整的代码如下：

<script>
$(document).ready(function(){
    var form = $('#formId');
    var resetBtn = $('#resetBtn');

    resetBtn.click(function(){
        //重置表单
        form[0].reset();
    });
});
</script>

2. 示例说明

示例一

HTML代码如下：

<form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" value="">
    <label for="age">年龄：</label>
    <input type="text" name="age" id="age" value="">
    <button id="resetBtn">重置</button>
</form>

点击重置按钮时，表单中的姓名和年龄输入框中的内容将被清空。

示例一完整代码如下：

<script>
$(document).ready(function(){
    var form = $('#myForm');
    var resetBtn = $('#resetBtn');

    resetBtn.click(function(){
        //重置表单
        form[0].reset();
    });
});
</script>

示例二

HTML代码如下：

<form id="myForm">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" value="">
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" value="">
    <button id="resetBtn">重置</button>
</form>

当输入了用户名和密码后，点击重置按钮，输入框中的内容将被清空。

示例二完整代码如下：

<script>
$(document).ready(function(){
    var form = $('#myForm');
    var resetBtn = $('#resetBtn');

    resetBtn.click(function(){
        //重置表单
        form[0].reset();
    });
});
</script>

以上代码就是jquery js 重置表单reset()的具体实现攻略。