数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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() 方法清除整个表单。此外，用户还可以仅使用第二种方法清除表单的输入字段。用户应该使用第一种方法仅清除特定输入字段。
41K+ 次浏览
