【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」に戻ったのが確認できたかと思います。
このようにリセットメソッドは値を空にするメソッドではなく、初期値に戻すメソッドであることがポイントです。
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
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メソッドを使おう！
