JavaScriptでresetイベントを設定する(フォームを初期化)

JavaScriptを使って、resetイベントを設定する方法などについて書いています。
resetイベントを使うと、フォームを初期化されたときに処理をすることができます。

実際に動くサンプルを使いつつ、以下について書いています。

・resetイベントとは？
・resetイベントをつける方法
・resetメソッドでフォームを初期化する
・inputタグのresetでフォームを初期化する

resetイベントを設定する方法と一緒にフォームを初期化する方法についても記載しています。

resetイベントとは？

resetイベントは、フォームがリセットされたときに発生するイベントです。
フォームのリセットボタンがクリックされるか、JavaScriptからフォームのresetメソッドが呼び出されるとトリガーされます。

このイベントを使用して、フォームがリセットされる前にカスタム処理を行ったり、リセット時に特定の操作を実行したりすることができます。

resetイベントをつける方法

resetイベントをHTML要素にonreset属性を使ってつける方法と、addEventListenerメソッドを使ってつける方法があります。

DOMにonresetを使ってイベントをつける

HTMLのonreset属性を使用して、直接イベントを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onreset Example</title>
</head>
<body>
    <form id="myForm" onreset="handleReset()">
        <input type="text" name="name" placeholder="名前">
        <input type="email" name="email" placeholder="メール">
        <fieldset>
            <div>
                <input type="radio" name="test-radio" value="test1" />
                <label for="test1">test1</label>
            </div>
            <div>
                <input type="radio" name="test-radio" value="test2" />
                <label for="test2">test2</label>
            </div>
        </fieldset>
        <select name="test-select">
            <option value=""></option>
            <option value="test1">test1</option>
            <option value="test2">test2</option>
            <option value="test3">test3</option>
        </select>
        <br />
        <button type="reset">リセット</button>
    </form>
    <script>
        function handleReset() {
            alert('フォームがリセットされました');
        }
    </script>
</body>
</html>

HTMLの解説

formタグの配下にテキストボックス、ラジオボタンやセレクトボックスを含めた適当なフォームを作成しました。
buttonタグでリセットボタンを用意しています。

type属性でresetを設定しているので、これでフォームがリセットされます。
ボタンが押されてリセットされた時にformタグのonreset属性に設定しているメソッドが処理されます。

JavaScriptの解説

handleReset関数は、resetイベントが発生したときに呼び出されます。
今回はリセットボタンを押した時です。

この関数は、アラートダイアログに「フォームがリセットされました」というメッセージを表示します。

動作確認

フォームのリセットボタンをクリックすると、下記のようにアラートダイアログが表示され、フォームの入力フィールドが初期状態に戻りました。
onresetでフォームリセット時の処理を確認

このようにonreset属性に設定した処理がリセット時に動きます。
動作としてはリセット前に処理された後に、フォームがリセットされました。

addEventListenerを使ってイベントをつける

HTMLでは特に設定を行わず、JavaScriptでイベントリスナーを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>addEventListener Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="名前">
        <input type="email" name="email" placeholder="メール">
        <fieldset>
            <div>
                <input type="radio" name="test-radio" value="test1" />
                <label for="test1">test1</label>
            </div>
            <div>
                <input type="radio" name="test-radio" value="test2" />
                <label for="test2">test2</label>
            </div>
        </fieldset>
        <select name="test-select">
            <option value=""></option>
            <option value="test1">test1</option>
            <option value="test2">test2</option>
            <option value="test3">test3</option>
        </select>
        <br />
        <button type="reset">リセット</button>
    </form>
    <script>
        document.getElementById('myForm').addEventListener('reset', function() {
            alert('フォームがリセットされました');
        });
    </script>
</body>
</html>

HTMLの解説

先ほどと同様にフォームを用意しています。
今回はフォームタグにonreset属性をつけずに、スクリプトの方で処理しています。

JavaScriptの解説

document.getElementById('myForm')で対象のフォーム要素を取得し、addEventListenerメソッドを使ってresetイベントリスナーを追加します。
第1引数で渡したresetがイベントになり、第2引数に匿名関数で処理を書いています。

先ほどと同じようにイベントが発生すると、アラートダイアログに「フォームがリセットされました」というメッセージが表示されます。

resetメソッドでフォームを初期化する

resetメソッドを使用すると、JavaScriptからフォームを初期化することができます。
これにより、ユーザーがリセットボタンをクリックしなくても、任意のタイミングでフォームのフィールドを初期状態に戻すことが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Form Reset Method Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="名前">
        <input type="email" name="email" placeholder="メール">
        <button type="button" id="resetButton">リセット</button>
    </form>
    <script>
        document.getElementById('resetButton').addEventListener('click', function() {
            document.getElementById('myForm').reset();
            alert('フォームがリセットされました');
        });
    </script>
</body>
</html>

HTMLの解説

簡単なフォームを用意しています。
リセットボタンはtype属性がbuttonになっているので、特にイベントが発生しないボタンです。

JavaScriptの解説

スクリプトの方では、id属性がresetButtonのボタンに対して、クリックイベントを追加しています。
このイベントはクリックしたときに発生します。

ボタンをクリックすると、document.getElementById('myForm')でフォームを取得して、取得したフォームからresetメソッドを呼び出しました。
これで、buttonタグのtype属性がresetでない場合でもフォームの値がリセットされます。

動作を確認する

動作を確認すると、下記のようにリセットされることが確認できました。
resetメソッドでフォームを初期化する

inputタグのresetでフォームを初期化する

inputタグのresetタイプを使用することでも、フォーム全体をリセットすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Input Reset Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="名前">
        <input type="email" name="email" placeholder="メール">
        <input type="reset" value="リセット">
    </form>
</body>
</html>

このコードでは、inputタグのresetタイプを使用して、フォームのリセットボタンを作成しています。
リセットボタンをクリックすると、フォームのすべての入力フィールドが初期状態に戻ります。

特に行いたい処理がなくフォームを初期化したいだけなら、このようにinputタグかbuttonタグのtype属性にresetをつけたボタンを用意すると良いかと思います。

動作確認

このようにリセットボタンをクリックすると、フォームが初期化されました。
type属性のresetでフォームを初期化

JavaScriptでresetイベントを設定する方法まとめ

JavaScriptを使って、resetイベントを設定する方法とフォーム初期化について解説しました。
以下のポイントをまとめます。

・`reset`イベントは、フォームがリセットされたときに発生するイベント。
・HTMLの`onreset`属性やJavaScriptの`addEventListener`メソッドを使って、`reset`イベントを設定できた。
・フォームから`reset`メソッドを呼び出すことで、フォームを初期化することができた。
・フォーム内の`input`タグや`button`タグの`type`属性に`reset`を設定することで、フォームを初期化することができた。

コメント