すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

JavaScript

公開日:  |  最終更新日:

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

ぴっかちゃん
ぴっかちゃん

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

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

上記のようなフォームがある場合は、以下のようにjavascriptファイル内にてresetメソッドを使用してフォームの内容をリセットすることが出来ます。

JavaScript | resetメソッドの使用例
1
2
3
function リセットする関数の名前 {
  document.フォームの名前.reset();
}

resetメソッド

resetメソッドの使い方

この章では、サンプルコードを使いながら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」に戻ったのが確認できたかと思います。

初期値にリセット

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

手元に置いておきたい1冊

こちらの「初めてのJavaScript 第3版」は、基本的な文法から高度な使い方まで非常に広範にわたる内容がこの1冊にまとめられています。

タイトルに「初めての」と付いていますが、完全なプログラミング初心者向けというわけではないので注意が必要です。Rubyなど他の言語を勉強している方にとっては良書となります。

Rubyを勉強されている方は、JavaScriptも扱う機会が多いと思います。これだけ広範な内容をカバーして丁寧に解説している本はあまりないので、手元に置いておいて損はない1冊です。

最初から全て理解するというわけではなく、必要な時に都度見返すようにしましょう!

初めてのJavaScript 第3版
初めてのJavaScript 第3版

ECMAScript 2015(ES2015)の入門書!

JavaScript 初心者におすすめの1冊

こちらの「JavaScript「超」入門 第2版」は、完全な初心者、JavaScriptに苦手意識がある、挫折したことがある人におすすめの1冊です。

Rubyなど他のプログラミング言語をある程度勉強されている方は、基礎的な内容がかなり含まれているので先程紹介した「初めてのJavaScript 第3版」の方が濃い内容を学習できます。

しかし、噛み砕いた解説で基礎を叩き込みたいという方は、こちらの本が合っています!

実際にサンプルを使って手を動かしながら学ぶことができます。

確かな力が身につくJavaScript「超」入門 第2版
確かな力が身につくJavaScript「超」入門 第2版

JavaScriptをこれから始める人にも、前に挫折したことのある人にも!

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
<script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<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メソッドを使おう!