JavaScriptで送信時にフォームフィールドをクリアする方法

ユーザーがページを更新しない、またはユーザーを成功ページにリダイレクトしないWebサイトでフォームを送信する場合、フォームフィールドをクリアしたいことがよくあります。バニラJavaScriptを使用してこれを行う方法は次のとおりです。

1。 HTML：ログインフォーム

ログイン（送信）ボタンを押す前に、ユーザーがユーザー名とパスワードを入力する一般的なHTMLログインフォームは次のとおりです。

<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：送信時にフォームフィールドをクリアする

このコードは、ユーザーが送信を押すとすぐにフォームのすべてのフィールドをクリアします：

// 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()
})