提交反应后如何清空表单 - Javascript

在使用表单提交数据时，有时候我们需要在表单提交成功后自动清空表单的输入框。这个操作可以通过Javascript来实现。本文将介绍如何使用Javascript清空表单输入框中的内容。

方法一：使用form.reset()

Javascript中，我们可以使用表单元素的reset()方法来清空表单输入框的内容。代码如下：

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

在这个示例代码中，我们通过getElementById()方法获取了一个ID值为“myForm”的表单元素，并调用了它的reset()方法，从而清空了表单输入框中的所有数据。

需要注意的是，reset()方法会将表单元素的所有值都重置为它们最初的值，这包括了表单元素的默认值和提交前用户输入的值。

方法二：逐个清空表单输入框的内容

如果我们只需要清空部分表单输入框的内容，或者需要在表单提交后执行其他操作，可以使用Javascript逐个清空表单输入框的内容。代码如下：

document.getElementById("input1").value = "";
document.getElementById("input2").value = "";
document.getElementById("textarea1").value = "";

在这个示例代码中，我们通过getElementById()方法获取表单中需要清空的输入框元素，然后将它们的value属性设置为空字符串，从而清空它们的值。

需要注意的是，这种方法只能清空表单输入框的值，而不能重置表单元素的属性。如果需要重置表单元素的属性，建议使用方法一中的reset()方法。

总结

本文介绍了如何使用Javascript清空表单输入框中的内容。通过使用表单元素的reset()方法或逐个清空输入框的值，我们可以实现在表单提交成功后清空表单输入框的操作。需要注意的是，reset()方法会将表单元素的所有值都重置为它们最初的值，而逐个清空输入框的值只能清空表单输入框的值，而不能重置表单元素的属性。

参考文献：

• Form.reset() | MDN