提交后如何在 js 中清除表单 - Javascript

在网页开发中，表单是非常常见的组件，当用户提交表单后，通常需要清除输入框中的内容以便下一次输入。本文将介绍如何在 JavaScript 中清除表单内容。

使用表单的 reset 方法

表单元素有一个名为 reset 的方法，调用该方法可以清除表单中所有输入框的内容。

document.getElementById('myForm').reset();

上面代码中，通过 getElementById 获取到表单元素，然后调用 reset 方法即可清除表单内容。

直接重置表单元素的 value 属性

除了使用 reset 方法外，还可以通过直接设置表单元素的 value 属性来清除表单内容。代码如下：

document.getElementById('myInput').value = '';

上面代码中，通过 getElementById 获取到输入框元素，然后将其 value 属性设置为空字符串即可清除输入框中的内容。

通过遍历表单元素清除内容

如果表单中有多个输入框，可以通过遍历表单元素来清除所有输入框中的内容。示例代码如下：

const form = document.getElementById('myForm');
const inputs = form.getElementsByTagName('input');
for (let i = 0; i < inputs.length; i++) {
  inputs[i].value = '';
}

上面代码中，通过 getElementById 获取到表单元素，然后通过 getElementsByTagName 获取到所有的输入框元素，最后通过 for 循环遍历所有输入框元素并将其 value 属性设置为空字符串即可清除所有输入框中的内容。

总结

本文介绍了三种清除表单内容的方法，通过使用 reset 方法、直接设置表单元素的 value 属性以及遍历表单元素来清除所有输入框中的内容。在实际开发中，根据具体情况选用不同的方法即可。