如何在不使用重置的情况下在 JavaScript 中清除提交后的表单?
javascriptweb developmentfront end technology更新于 2025/4/3 6:04:17
在互联网上，我们会发现很少有网站不包含表单。大多数网站包含联系表单，一些包含工作申请表，一些包含产品订单表。
表单允许我们从用户那里获取输入并在应用程序的前端或后端对其进行操作。此外，为了给应用程序用户提供良好的用户体验，我们需要在用户提交表单后重置所有表单数据。
在本教程中，我们将学习在用户按下提交按钮后清除表单输入字段的各种方法。
提交表单后清除单个输入字段
在本部分中，我们将学习清除表单的单个输入字段。有时，它要求用户通过更改一些输入值多次提交表单。因此，在这种情况下，我们可以单独清除一些输入字段，而不是清除所有输入字段。
语法
用户可以按照以下语法清除表单的单个输入字段。
let input1 = document.getElementById('input1');
input1.value = "";
在上述语法中，我们通过表单的 id 访问了表单的输入，并将空字符串分配给输入的值。
示例
在下面的示例中，我们创建了包含单个输入的表单。当用户按下清除输入字段按钮时，它会调用 clearText() 函数，该函数会重置输入字段的值。
在输出中，用户可以观察到，当他们按下提交按钮时，它会清除输入字段。
Clearing only single input field of form when a user submits the form
Please enter a string below:
提交表单后清除表单的所有输入字段
有时，我们可能需要清除表单的所有输入字段。我们可以使用 JavaScript 的 querySelector() 方法选择表单的所有输入字段，该方法返回所有输入字段的数组。
之后，我们可以遍历输入数组，并通过将空字符串分配给其 value 属性来清除每个输入。
语法
用户可以按照以下语法访问所有输入并清除它们。
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
在上述语法中，"inputs"是所有输入的数组，我们使用 forEach() 循环方法来遍历所有输入。
示例
在下面的示例中，我们创建了多个不同类型的输入表单。之后，在 JavaScript 中，我们使用 querySelector() 方法选择所有输入。在 forEach() 循环中，我们传递了回调函数，该函数为每个输入的值属性设置空字符串。
当用户单击"清除所有输入"按钮时，它会清除所有输入字段。
Clearing only all input fields of form when a user submits the form
使用 form.reset() 方法重置整个表单
form.reset() 是 JavaScript 中用于清除表单的内置方法。我们可以使用它来将表单中的所有值重置为默认值。
语法
用户可以按照以下语法使用 reset() 方法在用户提交表单时重置整个表单。
formToReset.reset();
在上述语法中，formToReset() 是要重置的表单元素。
示例
以下示例演示了 reset() 方法的使用。它包含具有两个不同输入字段的表单。此外，我们创建了一个"提交"类型的按钮，用户可以按下它来提交表单。
在 JavaScript 中，我们使用事件监听器来提交事件，并在提交事件时执行 reset() 方法。
Clearing only the form using the reset() method when a user submits the form
我们已成功学习了提交表单后清除表单的三种方法。用户可以使用 reset() 方法清除整个表单。此外，用户只能使用第二种方法清除表单的输入字段。用户应使用第一种方法仅清除特定输入字段。
相关文章
向数组和对象数组中的公共项添加属性 - JavaScript?
如何使用 JavaScript 创建动画?
如何在屏幕中间显示 JavaScript 警告框?
如何使用 JavaScript 更改警告框的样式?
如何在 JavaScript 中获取自 Unix 纪元以来的毫秒时间?
如何使用 JavaScript 从元素中删除类名?
JavaScript 函数调用
JavaScript DataView()
JavaScript Array.from() 方法
JavaScript 回调
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.w3schools.cn/javascript/
打印
下一节:如何在 JavaScript 中声明字符串变量? ❯❮ 上一节:如何使用 HTML 在 JavaScript 中单击显示图像?