javascript clear form after dubmit - Javascript (1)

📌 相关文章

📜 javascript clear form after dubmit - Javascript (1)

📅 最后修改于: 2023-12-03 15:01:37.028000 🧑 作者: Mango

使用JavaScript在提交后清除表单

在表单提交后，我们通常希望将表单重置为初始状态，以便进行下一次输入。使用JavaScript可以实现这个功能。本文将介绍通过JavaScript在表单提交后清除表单的方法。

HTML

我们首先需要编写HTML表单：

<form id="my-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br><br>
  <button type="submit">Submit</button>
</form>

这是一个简单的表单，包括名称、电子邮件和消息等字段。提交按钮将触发表单提交。

JavaScript

我们将使用JavaScript来完成表单提交后清除表单的操作。首先，我们需要获取表单元素：

const form = document.querySelector('#my-form');

然后，我们需要将表单的submit事件监听器添加到表单上：

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单提交的默认行为
  // 清除表单的代码将在这里添加
});

这里使用了preventDefault()方法来阻止表单提交的默认行为。然后，我们可以在其中添加代码来清除表单。

为了清除表单，我们需要遍历表单的输入元素，并将其值设置为空：

// 清除表单
form.querySelectorAll('input, textarea').forEach(input => input.value = '');

这里使用了querySelectorAll()方法来选择表单中的所有输入和文本区域。然后使用forEach方法遍历这些元素，并将它们的值设置为空字符串。

现在，我们的JavaScript代码看起来像这样：

const form = document.querySelector('#my-form');
form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单提交的默认行为
  // 清除表单
  form.querySelectorAll('input, textarea').forEach(input => input.value = '');
});

完整代码

下面是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Clear Form on Submit</title>
  </head>
  <body>
    <h1>Clear Form on Submit</h1>
    <form id="my-form">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="message">Message:</label>
      <textarea id="message" name="message"></textarea><br><br>
      <button type="submit">Submit</button>
    </form>
    <script>
      const form = document.querySelector('#my-form');
      form.addEventListener('submit', (e) => {
        e.preventDefault(); // 阻止表单提交的默认行为
        // 清除表单
        form.querySelectorAll('input, textarea').forEach(input => input.value = '');
      });
    </script>
  </body>
</html>

结论

通过JavaScript可以很容易地在表单提交后清除表单。我们可以通过遍历表单元素并将它们的值设置为空来实现。使用preventDefault()方法来阻止表单提交的默认行为是很重要的，否则表单提交后页面将重新加载。