如何使用 JavaScript 重置或清除表单?

javascriptweb developmentfront end scripts

本教程教我们如何使用 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() 方法的表单将重置所提供表单的每个输入部分。此外,如果任何输入存在任何预定义值,它将获取该值。


相关文章