极客教程Javascript 如何提交后清除表单而不使用reset
在互联网上，我们会发现很少有网站不包含表单。大多数网站都包含联系表格，有些包含工作申请表格，有些包含产品订购表格。
表单允许我们接受用户的输入，并在应用程序的前端或后端对其进行操作。同时，为了给应用程序用户提供良好的用户体验，一旦用户提交表单，我们需要重置所有的表单数据。
在本教程中，我们将学习各种方法，以便在用户按下提交按钮后清除表单的输入字段。
提交表格后清除单一输入字段
在这一部分，我们将学习如何清除表单的单个输入字段。有时，需要用户通过改变一些输入值多次提交表单。所以，在这种情况下，我们可以只单独清除一些输入字段，而不是清除所有输入字段。
语法
用户可以按照下面的语法来清除表单中的单个输入字段。
let input1 = document.getElementById('input1');
input1.value = "";
在上面的语法中，我们通过id访问表单的输入，并将空字符串分配给输入的值。
示例
在下面的例子中，我们已经创建了包含一个单一输入的表单。当用户按下清除输入字段的按钮时，会调用’clearText()’函数，重置输入字段的值。
在输出中，用户可以观察到，当他们按下提交按钮时，它清除了输入栏。
<html>
<body>
<h3>Clearing only single input field of form when a user submits the form</h3>
<p>Please enter a string below:</p>
<form>
<input type = "text" id = "input1" />
<br> <br>
</form>
<button type = "submit" onclick = "clearText()"> clear input field</button>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
function clearText(event) {
// access input field
let input1 = document.getElementById('input1');
// clear the input field.
input1.value = "";
output.innerHTML += "Form submitted successfully! <br>";
}
</script>
</body>
</html>
提交表格后清除表格的所有输入字段
有时，我们可能需要清除表单的所有输入字段。我们可以使用JavaScript的querySelector()方法来选择表单的所有输入字段，它返回所有输入字段的数组。
之后，我们可以遍历输入数组，并通过将空字符串分配给其值属性来清除每个输入。
语法
用户可以按照下面的语法来访问所有的输入并清除它们。
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
在上面的语法中，’inputs’是一个包含所有输入的数组，我们使用了forEach()循环方法来迭代所有输入。
示例
在下面的例子中，我们已经创建了多个不同类型的输入表单。之后，在JavaScript中，我们使用querySelector()方法来选择所有输入。在forEach()循环中，我们通过回调函数，为每个输入的值属性设置了空字符串。
当用户点击 “清除所有输入 “按钮时，就会清除所有输入字段。
<html>
<body>
<h3>Clearing only all input fields of form when a user submits the form</h3>
<form>
First Name: <input type = "text" id = "input1" />
<br> <br>
Last Name: <input type = "text" id = "input2" />
<br> <br>
Email: <input type = "email" id = "input3" />
<br> <br>
</form>
<button type = "submit" onclick = "clearAllInputs()"> clear all inputs </button>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
function clearAllInputs(event) {
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
output.innerHTML += "Form submitted and cleared successfully! <br>";
}
</script>
</body>
</html>
使用form.reset()方法重置整个表单
form.reset()是JavaScript中的一个内置方法，用于清除表单。我们可以用它来重置表单中的所有值为默认值。
语法
用户可以按照下面的语法来使用reset()方法，在用户提交表单的时候重置整个表单。
formToReset.reset();
在上述语法中，formToReset()是一个要重置的表单元素。
示例
下面的例子演示了reset()方法的使用。它包含有两个不同的输入字段的表单。此外，我们还创建了一个 “提交 “类型的按钮，用户可以按下它来提交表单。
在JavaScript中，我们使用了事件监听器来提交事件，并在提交事件时执行reset()方法。
<html>
<body>
<h3>Clearing only the form using the reset() method when a user submits the form</h3>
<form id = "demo_form">
Name: <input type = "text" id = "input1" />
<br> <br>
Email:<input type = "email" id = "input3" />
<br> <br>
<button type = "submit"> clear all inputs </button>
</form>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
const formToReset = document.getElementById('demo_form');
formToReset.addEventListener('submit', (e) => {
e.preventDefault();
formToReset.reset();
output.innerHTML += "The form is resetted successfully!"
});
</script>
</body>
</html>
我们已经成功地学习了三种方法来清除提交后的表单。用户可以使用reset()方法来清除整个表单。另外，用户只能用第二种方法清除表单的输入字段。用户应该使用第一种方法，只清除特定的输入字段。