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

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

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

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

1
2
3
function リセットする関数の名前 {
  document.フォームの名前.reset();
}

resetメソッドの使い方

リンクをコピーしました

この章では、サンプルコードを使いながらresetメソッドについて解説します。

具体的な例で確認しよう

リンクをコピーしました

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

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>

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

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

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

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

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

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」に戻ったのが確認できたかと思います。

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

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

リンクをコピーしました

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

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

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

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

初めてのJavaScript 第3版

ECMAScript 2015(ES2015)の入門書！

楽天市場

Amazon

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

リンクをコピーしました

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

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

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

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

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

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

楽天市場

Amazon

jQueryでresetメソッドを使う場合

リンクをコピーしました

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

1
  $('セレクタ名')[0].reset();

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

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タグだけで書く方法もあります。
その際は下記のように記述します。

1
<input type="reset" value="リセット">

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

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メソッドの時と同じように値が初期値に戻ることが確認できるはずです。

val('')との違い

リンクをコピーしました

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

val()メソッドの使い方

リンクをコピーしました

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

1
2
3
4
5
#値を取得するとき
$("セレクタ名").val();

#値を空にするとき
 $("セレクタ名").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メソッドを使うようにしましょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ