formObject.onresetイベント

formObject.onresetは、フォームの内容をリセットする時のイベント。

フォーム内容リセット時にイベントハンドラを登録したいときに使う。

構文

HTML

<form onreset="イベントハンドラ"></form>

JavaScript

formObject.onreset = function(){ イベントハンドラ };

サンプル1

【サンプルフォーム】

入力欄:

サンプル1について

HTMLドキュメント上でイベントハンドラを登録するサンプル。

サンプル1の動作について

  • 「送信」ボタンをクリックすると、【サンプルフォーム】の内容を送信する。「【サンプルフォーム】」の右横に「送信しました!」と約3秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。
  • 「リセット」ボタンをクリックすると、【サンプルフォーム】の内容をリセットし、初期状態に戻す。このサンプルの場合、入力欄の値を「JavaScript」に戻す。「【サンプルフォーム】」の右横に「リセットしました!」と約3秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function eventFunction( $message ) {
    var $formObject = document.getElementById( "sampleForm" );
    var $sampleOutput = document.getElementById( "sampleOutput" );
    for( var $i = 1; $i < $formObject.length; $i++ ) {
        $formObject.elements[$i].disabled = true;
    }
    $sampleOutput.innerHTML = $message;
    setTimeout(
        function(){
            $sampleOutput.innerHTML = "";
        },
        500
    );
    var $intervalID = window.setInterval(
        function(){
            $sampleOutput.innerHTML = $message;
            setTimeout(
                function(){
                    $sampleOutput.innerHTML = "";
                },
                500
            );
        },
        1000
    );
    setTimeout(
        function(){
            for( var $i = 1; $i < $formObject.length; $i++ ) {
                $formObject.elements[$i].disabled = false;
            }
            clearInterval( $intervalID );
        },
        2999
    );
}
</script>

HTML

<form id="sampleForm" method="get" action="http://alphasis.info/" target="_blank" onsubmit="eventFunction(' 送信しました!')" onreset="eventFunction(' リセットしました!')">
    <p>【サンプルフォーム】<span id="sampleOutput"></span></p>
    <p>
        入力欄:<input type="text" name="s" value="JavaScript">
    </p>
    <p>
        <input type="submit" value="送信">
        <input type="reset" value="リセット">
    </p>
</form>

CSS

<style>
#sampleForm p {
    margin-bottom: 3px;
}
#sampleForm p * {
    margin: 0;
}
#sampleOutput {
    color: red;
    font-weight: bold;
}
</style>

サンプル2

【サンプルフォーム】

入力欄:

サンプル2について

JavaScript上で動的にイベントハンドラを登録するサンプル。

サンプル2の動作について

  • 「送信」ボタンをクリックすると、【サンプルフォーム】の内容を送信する。「【サンプルフォーム】」の右横に「送信しました!」と約3秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。
  • 「リセット」ボタンをクリックすると、【サンプルフォーム】の内容をリセットし、初期状態に戻す。このサンプルの場合、入力欄の値を「JavaScript」に戻す。「【サンプルフォーム】」の右横に「リセットしました!」と約3秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sampleFormB" ).onreset = function(){
        eventFunctionB(' リセットしました!');
    };
    document.getElementById( "sampleFormB" ).onsubmit = function(){
        eventFunctionB(' 送信しました!');
    };
}
function eventFunctionB( $message ) {
    var $formObject = document.getElementById( "sampleFormB" );
    var $sampleOutput = document.getElementById( "sampleOutputB" );
    for( var $i = 1; $i < $formObject.length; $i++ ) {
        $formObject.elements[$i].disabled = true;
    }
    $sampleOutput.innerHTML = $message;
    setTimeout(
        function(){
            $sampleOutput.innerHTML = "";
        },
        500
    );
    var $intervalID = window.setInterval(
        function(){
            $sampleOutput.innerHTML = $message;
            setTimeout(
                function(){
                    $sampleOutput.innerHTML = "";
                },
                500
            );
        },
        1000
    );
    setTimeout(
        function(){
            for( var $i = 1; $i < $formObject.length; $i++ ) {
                $formObject.elements[$i].disabled = false;
            }
            clearInterval( $intervalID );
        },
        2999
    );
}
</script>

HTML

<form id="sampleFormB" method="get" action="http://alphasis.info/" target="_blank"">
    <p>【サンプルフォーム】<span id="sampleOutputB"></span></p>
    <p>
        入力欄:<input type="text" name="s" value="JavaScript">
    </p>
    <p>
        <input type="submit" value="送信">
        <input type="reset" value="リセット">
    </p>
</form>

CSS

<style>
#sampleFormB p {
    margin-bottom: 3px;
}
#sampleFormB p * {
    margin: 0;
}
#sampleOutputB {
    color: red;
    font-weight: bold;
}
</style>

スポンサード リンク

カテゴリー: DOM, Formオブジェクト, JavaScript, イベント, リファレンス パーマリンク