【JavaScript】resetメソッドを使ってフォームをリセットしよう

JavaScript

resetメソッドとは

フォームの内容をリセットするときに使うJavaScriptのメソッドです。

resetメソッドの使い方
リンクをコピーしました

フォームに書き込んだ内容を初期値に戻したいときに使います。
書き方の一例です。

html | フォームの作成
1
2
3
4
<form name="フォームの名前">
  <inputタグでフォームを作成>
  <button type="button" onclick="リセットする関数の名前">リセットするボタン名</button>
</form>

javascriptファイル内にてresetメソッドを使用します。

javascript | resetメソッドの書き方
1
2
3
function リセットする関数の名前 {
  document.フォームの名前.reset();
}

具体的な例をみてみよう
リンクをコピーしました

それでは実際にどのように使うのかを確認していきましょう。
今回は下記のようにフォームを作成します。

html | 具体的な書き方の例
1
2
3
4
5
6
7
8
9
10
11
<script>
function formReset() {
  document.sampleform.reset();
}
</script>

<form name="sampleform">
  <p>名前:<input type="text" name="name"></p>
  <p>年齢:<input type="text" name="age"></p>
  <p><button type="button" onclick="formReset()">リセット</button></p>
</form>

上のコードは下記のように表示されます。
実際に名前と年齢に値を打ち込み、リセットボタンを押してみましょう。

名前:

年齢:

このように値が初期値に戻ることが確認できるはずです。

resetメソッド

ポイントはリセットボタンを押すとformResetメソッド内に記述されたresetメソッドが実行され、フォーム内の全ての内容が一度に初期値に戻るという点です。

上の例の場合だと初期値の値が何もないので空っぽになりました。
では初期値があらかじめ設定してある場合をみてみましょう。

下の例のように初期値を設定しておきます。

html | 初期値の設定
1
2
3
4
5
6
7
8
9
10
11
<script>
  function formReset2() {
    document.sampleform2.reset();
  }
</script>

<form name="sampleform2">
  <p>名前:<input type="text" name="name" value="ピカわか"></p>
  <p>年齢:<input type="text" name="age" value="25"></p>
  <p><button type="button" onclick="formReset2()">リセット</button></p>
</form>

上のコードは下記のように表示されます。
あらかじめ値が入っているのが確認できます。
実際に値を変更してリセットボタンを押してみましょう。

名前:

年齢:

値が空になるのではなく、初期値の「ピカわか」と「25」に戻ったのが確認できたかと思います。

初期値にリセット

このようにリセットメソッドは値を空にするメソッドではなく、初期値に戻すメソッドであることがポイントです。

jQueryでresetメソッドを使う場合
リンクをコピーしました

resetメソッドはjQueryでも使うことができます。
その際は下記のような記述になるので注意しましょう。

javascript | resetメソッドの書き方
1
  $('セレクタ名')[0].reset();

実際の例を見てみましょう。

html | 具体的な書き方の例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#jQueryを使うための記述
<script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

#javascriptの記述
<script>
$(function() {
  $('#formreset').click(function(){
    $('#sampleform')[0].reset();
   });
 });
</script>

#フォームを表示するための記述
<form id="sampleform">
  <p>名前:<input type="text" name="name"></p>
  <p>年齢:<input type="text" name="age"></p>
  <p><button type="button" id="formreset">リセット</button></p>
</form>

上のコードは下記のように表示されます。
同じように値が初期値に戻ることが確認できるはずです。

名前:

年齢:

inputタグでの書き方
リンクをコピーしました

resetメソッドを使わず、inputタグだけで書く方法もあります。
その際は下記のように記述します。

html | inputタグでの書き方
1
<input type="reset" value="リセット">

このように「type="reset"」と記述します。

html | 書き方の例
1
2
3
4
5
<form>
  <p>名前:<input type="text" name="name"></p>
  <p>年齢:<input type="text" name="age"></p>
  <p><input type="reset" value="リセット"></p>
</form>

上のコードは下記のように表示されます。
実際に名前と年齢に値を打ち込み、リセットボタンを押してみましょう。

名前:

年齢:

このようにresetメソッドの時と同じように値が初期値に戻ることが確認できるはずです。

resetメソッド

val('')との違い
リンクをコピーしました

jQueryのメソッドにval()メソッドがあります。
これはvalue属性を取得・変更・設定することができるメソッドです。
resetメソッドは初期値に戻すメソッドでしたが、val()メソッドは初期値に値があらかじめ値が入っていても空欄の状態にすることができます。

val()メソッドの使い方
リンクをコピーしました

val()メソッドは下記のように使用します。

javascript | val()メソッドの書き方
1
2
3
4
5
#値を取得するとき
$("セレクタ名").val();

#値を空にするとき
 $("セレクタ名").val("");

具体的には下記のように記述します。

html | val("")の使い方
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#jQueryを使うための記述
<script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

#javascriptの記述
<script>
$(function() {
  $("#resetButton").click(function() {
    $('#textField').val("");
    $('#imageField').val("");
  });
});
</script>

#フォームを表示するための記述
<form>
  <p><input type="text" name="text" id="textField"></p>
  <p><input type="file" name="image" id="imageField"></p>
  <p><button type="button" id="resetButton">リセット</button></p>
</form>

上のコードで下記のフォームが表示されます。
何か入力し、リセットボタンを押すと値が空になります。

空になったのが確認できたと思います。
ただどちらのフォームにも「val("")」を書かなくてはならないので面倒ですよね。
上の例だと2つのフォームでしたが、これが10個とかになると非常にコードが長くなってしまいます。

ですので、一括でフォームの内容を初期値に戻したいときにはresetメソッドを使うようにしましょう。

まとめ

・resetメソッドはフォームの内容をリセットするときに使うメソッドです。
・resetメソッドは値を空にするのではなく初期値に戻すメソッドです。
・val("")メソッドは値を空にすることができますが、一つ一つのフォームに定義する必要があるので、全てのフォームをリセットしたい場合はresetメソッドを使いましょう。