Cách xóa các trường biểu mẫu khi gửi bằng JavaScript

Khi người dùng gửi biểu mẫu trên một trang web không làm mới trang hoặc chuyển hướng người dùng đến trang thành công, bạn thường muốn xóa các trường biểu mẫu. Dưới đây là cách thực hiện điều đó với JavaScript vani.

1. HTML:biểu mẫu đăng nhập

Đây là biểu mẫu đăng nhập HTML điển hình trong đó người dùng nhập tên người dùng và mật khẩu của họ, trước khi nhấn vào nút Đăng nhập (gửi):

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" />

  <button>Login</button>
</form>

2. JavaScript:xóa các trường biểu mẫu khi gửi

Mã này sẽ xóa mọi trường trong biểu mẫu ngay sau khi người dùng nhấn gửi:

// Run function when a submit event is registered
document.addEventListener("submit", function(event) {
  // Prevent default form submit
  event.preventDefault()

  // Clear all form fields
  event.target.reset()
})