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

Webサイトの中には、ページを再読み込みせずにフォームを送信したり、送信後に別の完了ページへリダイレクトしたりしない実装が多くあります。このような場合、ユーザーが次の入力を始めやすいように、送信後にフォームの入力欄を空にしておきたいことがあります。本記事では、ライブラリに頼らずバニラJavaScriptだけでこれを実現する方法を解説します。

1. HTML：ログインフォームのサンプル

まずは、ユーザー名とパスワードを入力し、「ログイン」ボタン（送信ボタン）を押して認証を行う、典型的なHTMLログインフォームです。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" />

  <label for="password">パスワード：</label>
  <input type="password" id="password" />

  <button>ログイン</button>
</form>

2. JavaScript：送信時に全フィールドをクリアする

以下のコードを使うと、ユーザーが送信ボタンを押した瞬間に、フォーム内のすべての入力フィールドがクリアされます。

// submit イベントを検知して関数を実行
document.addEventListener("submit", function(event) {
  // デフォルトのフォーム送信（ページ遷移）を防止
  event.preventDefault()

  // フォームのすべてのフィールドをクリア
  event.target.reset()
})

コードの仕組みを簡単に解説

このコードのポイントは次の2つです。

• event.preventDefault()：フォーム送信時のデフォルト動作であるページの再読み込みや遷移をキャンセルします。
• event.target.reset()：送信されたフォーム要素に対して reset() メソッドを呼び出し、すべての入力フィールドを初期状態に戻します。

なお、reset() は単に入力を消すだけでなく、HTMLの value 属性などで指定された初期値がある場合はその値に戻すという点にも注意してください。完全に空白にしたい場合は、各入力要素の value プロパティに直接空文字列を代入する方法も検討するとよいでしょう。