JavaScriptのonresetとは？フォームリセット時に処理を実行する方法を解説
onreset は、フォームがリセットされたときに発生するイベントです。
リセットボタンが押されたとき、または form.reset() が実行されたときに処理を実行できます。
また、戻り値が false の場合、リセット処理を中止できます。
onresetイベントとは？
フォームの内容を初期状態に戻す直前に発生するイベントです。
入力内容を消す前に確認ダイアログを表示したり、リセットを防止したい場合に利用します。
使用例：リセット時に確認ダイアログを表示
→ OK を押した場合のみリセットされ、キャンセルなら中止されます。
リセット処理を中止する方法
リセットを止めたい場合は、return false を返す関数を使います。
alert(‘リセットは中止されました’);
return false;
}
この関数を onreset に設定すると、リセットされません。
実際のフォーム例（確認付きリセット）
function checkReset() {
return confirm(‘入力内容をすべて消去します。よろしいですか？’);
}
</script>
<form name=”myForm” onreset=”return checkReset()”>
名前：<input type=”text” name=”user”><br>
メール：<input type=”text” name=”mail”><br>
<input type=”reset” value=”リセット”>
<input type=”submit” value=”送信”>
</form>
→ リセットボタンを押すと確認ダイアログが表示されます。
JavaScript 初心者におすすめの学習書籍
手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→ いちばんやさしい JavaScript の教本
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- エラーの原因が分からず、調べても解決できない
- 学習の順番に自信が持てない
- モチベーションが続かず、途中で止まってしまう
- 実務レベルのコードレビューを受ける機会がない
こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。
無料相談で得られるメリット
- あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
- 独学で詰まりやすいポイントを事前に教えてくれる
- 学習方法の改善点をプロがアドバイスしてくれる
- エンジニア転職を考えている場合、キャリア相談も可能
JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。
まとめ
onresetはフォームリセット時に発生するイベント- 戻り値が
falseの場合、リセットを中止できる - 確認ダイアログを表示して誤操作を防止できる
- フォーム操作の安全性を高めるために便利
