JavaScriptとjQueryでフォームをリセットする方法

JavaScript

フォームのリセットは、JavaScriptの組み込みメソッドであるreset()を使用することで簡単に行えます。

<form id="myForm">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById("myForm").reset();
</script>

上記のコードでは、myFormというIDを持つフォームをリセットしています。

jQuery

jQueryでも、reset()メソッドを使用することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form id="myForm">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

<script>
  $("#myForm").reset();
</script>

jQueryのセレクタを使ってフォームを指定し、reset()メソッドを呼び出しています。

注意:

• reset()メソッドは、フォーム内のすべての入力フィールドを初期値に戻します。
• フォームの送信後に自動的にリセットしたい場合は、フォームの送信イベントハンドラーでreset()メソッドを呼び出します。

例:

$("#myForm").submit(function(event) {
  event.preventDefault();
  // フォームの処理
  // ...
  $(this).reset();
});

JavaScriptでフォームリセットの例

JavaScriptの組み込みメソッドを使用する

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
  document   .getElementById("myForm").reset();
</script>

• 説明:
  • document.getElementById("myForm")でフォーム要素を取得します。

jQueryを使用する

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
  $("#myForm").reset();
</script>

• 説明:
  • jQueryのセレクタを使ってフォーム要素を取得します。

フォーム送信後に自動的にリセットする

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
  $("#myForm").submit(function(event) {
    event.preventDefault();
    // フォームの処理
    // ...
    $(this).reset();
  });
</script>

• 説明:
  • フォームの送信イベントハンドラーでreset()メソッドを呼び出すことで、フォームが送信された後に自動的にリセットされます。
  • event.preventDefault()は、デフォルトのフォーム送信動作をキャンセルします。

個々の入力フィールドを直接リセットする

<form id="myForm">
  <input type="text" name="name" id="nameInput">
  <input type="email" name="email" id="emailInput">
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById("nameInput").value = "";
  document.getElementById("emailInput").value = "";
</script>

• 説明:

フォームの要素をループしてリセットする

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
  const form = document.getElementById("myForm");
  const inputs = form.elements;

  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].type !== "submit") {
      inputs[i].value = "";
    }
  }
</script>

• 説明:

jQueryのval()メソッドを使用する

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
  $("#myForm input[type!='submit']").val("");
</script>

• 説明: