如何使用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年9月6日

42K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.