如何使用 JavaScript 重置或清空表单？

本教程将教你如何使用 JavaScript 重置或清空表单。在用户填写错误表单并意识到错误，希望在提交前删除所有数据的情况下，此选项非常有用。如果表单过大，手动删除所有内容可能会很困难，因此最好使用 JavaScript 的reset() 方法。

reset() 方法在 JavaScript 中定义，只需点击它，与 onclick() 方法关联的表单就会重置提供的表单的每个输入部分。

语法

我们已经了解了 reset() 函数的基础知识，现在让我们来看一下它的语法：

var element = document.getElementById( Id_of_required_form ).
element.reset()

在上述语法中，“Id_of_required_form” 是我们要重置或清空的表单的 id。我们使用了 DOM 的 ‘getElementById’ 方法获取表单，并将其存储在名为 ‘element’ 的变量中。

然后，通过使用 reset() 方法，我们通过调用它来重置或清空 id 为 ‘Id_of_required_form’ 的表单元素。

算法

我们已经了解了通过获取表单 id 和 reset() 方法来重置或清空表单的语法，让我们一步步查看完整的算法，以便更好地理解它：

创建用户表单

在这些步骤中，我们将创建一个表单，在其中定义或创建许多输入框供用户输入以填写表单，以及一个按钮，该按钮将调用函数以从下拉列表中删除对象。

  • 首先，我们必须使用 <form> 标签创建一个表单，我们希望使用 JavaScript 的 reset() 方法重置或清空该表单。

  • 在表单中，我们使用 <input> 标签创建了一些输入框，用户可以在其中写入数据。

  • 这些输入空间将是文本类型和数字类型，以便以所需的类型获取用户输入。

  • 在表单中定义用于获取用户输入的“输入”后，我们将使用 <input> 标签定义一个输入字段，并将其设置为按钮类型，我们将定义 'onclick' 事件，该事件将调用我们稍后在脚本中定义的函数。

定义删除脚本或函数

在这些步骤中，我们将定义将在上面定义的按钮的 ‘onclick’ 事件中调用的函数。

  • 首先，我们将使用 ‘function’ 关键字创建一个函数，并为其命名，该名称将在 ‘onclick’ 事件中调用。

  • 在定义的函数中，我们将创建一个变量来存储对 ‘document.getElementById()’ 方法的调用的返回值。

  • 我们将上面定义的表单的 ‘id’ 作为参数传递给对 ‘document.getElementById()’ 方法的调用。

  • 通过对变量（包含对该方法的调用的返回值）使用 reset 方法，我们可以将每个输入字段重置为空。

这些是使用 JavaScript 重置或清空表单的基本步骤，现在让我们看一些示例，以便更好地理解上述步骤。

示例

在这个示例中，我们将逐步实现上面定义的算法，让我们实现代码：

<!DOCTYPE html>
<html>
<body>
   <h3>Fill out the below-given form and click the reset button to see the working of the reset() function in JavaScript.</h3>
   <form id=" form_id ">
      Student Name <br>
      <input type="text" name="sname"> <br>

      Student Subject <br>
      <input type = "password" name = "ssubject" > <br>

      Student Roll Number <br>
      <input type = "roll_no" name = "roll_number" > <br>
      <input type = "button" onclick = "newFunction()" value = "Reset" >
   </form>
   <script>
      function newFunction(){
        var element = document.getElementById(" form_id ");
         element.reset()
      }
   </script>
</body>
</html>

在上面的输出中，我们得到一个表单，其中有一些输入空间，用户可以在其中提供一些输入，最后有一个重置按钮，它会将表单重置为原始或初始表单。

结论

在本教程中，我们学习了使用 JavaScript 重置或清空 HTML 表单的方法。只有在定义 HTML 表单 时，程序员定义或创建了一个供用户重置表单的按钮，否则用户必须手动重置它。

reset() 函数在 JavaScript 中定义，只需点击它，与 onclick() 方法关联的表单就会重置提供的表单的每个输入部分。此外，如果任何输入存在任何预定义值，它将获取该值。

更新于：2023-09-06

42K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.