使用 JavaScript 提交后清除输入字段

作者

目录

Clear Input fields after Submit using JavaScript

  1. 提交后清除输入字段
  2. 提交后清除多个输入字段
  3. 提交后清除所有表单域

提交后清除输入字段

提交后清除输入字段：

  1. 向按钮添加click事件侦听器。
  2. 单击按钮时，将输入字段的值设置为空字符串。
  3. 将字段的值设置为空字符串会重置输入。

这是此示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" name="first_name" />

    <button id="btn" type="submit">Submit</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick(event) {
  // 👇️ if you are submitting a form (prevents page reload)
  event.preventDefault();

  const firstNameInput = document.getElementById('first_name');

  // Send value to server
  console.log(firstNameInput.value);

  // 👇️ clear input field
  firstNameInput.value = '';
});

提交后清空输入框

我们click为按钮添加了一个事件监听器。

Every time the button is clicked, the handleClick function is invoked, where we set the value of the input to an empty string.

Clear multiple input fields after submit #

To clear the values for multiple inputs after submitting:

  1. Use the querySelectorAll() method to select the collection.
  2. Use the forEach() method to iterate over the results.
  3. Set the value of each input field to an empty string to reset it.
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" name="first_name" />
    <input type="text" id="last_name" name="last_name" />

    <button id="btn" type="submit">Submit</button>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick(event) {
  // 👇️ if you are submitting a form
  event.preventDefault();

  const inputs = document.querySelectorAll('#first_name, #last_name');

  inputs.forEach(input => {
    input.value = '';
  });
});

提交后清除多个输入字段

We used the
querySelectorAll
method to select a NodeList containing the elements with IDs set to
first_name and last_name.

The method takes a string that contains one or more valid CSS selectors.

The function we passed to the
forEach
method gets invoked with each input in the NodeList.

In the function, we set the value of each input to an empty string.

Clear all form fields after submitting #

To clear all form fields after submitting:

  1. Add a submit event listener on the form element.
  2. When the form is submitted, call the reset() method on the form.
  3. The reset method restores the values of the input fields to their default
    state.

Here is the HTML for this example:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form action="" id="my_form">
      <input type="text" id="first_name" name="first_name" />
      <input type="text" id="last_name" name="last_name" />

      <button id="btn" type="submit">Submit</button>
    </form>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js
const form = document.getElementById('my_form');

form.addEventListener('submit', function handleSubmit(event) {
  event.preventDefault();

  // 👇️ Send data to server here

  // 👇️ Reset form here
  form.reset();
});

提交后清除所有表单字段

We added a
submit
event listener to the form element.

The event fires when a form is submitted.

We used the event.preventDefault() method to prevent the page from reloading.

reset()方法将

表单的元素恢复为其默认值。

–