FancyFormでイベントを設定する

FancyFormでは、選択された時に独自にイベントを設定できます。このイベント設定はFancyForm.start()で最初のパラメータをtrueにし、2番目のオプションパラメータでonSelectに処理を指定します。onSelectイベントで実行される関数にはパラメータとして選択されたエレメントへの参照が渡されます(thisで参照できます)。サンプル05では選択されたラジオボタンとチェックボックスの名前を表示しています。

サンプル05の実行結果

選択したラジオボタンまたはチェックボックスの名前(name属性で指定されたもの)が

テキストフィールドに表示される

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>FancyFormサンプル</title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/mootools.v1.11.js"></script>
        <script type="text/javascript" src="js/moocheck.js"></script>
        <script type="text/javascript"><!--
            window.addEvent("load", function(){
                FancyForm.start( 0, {
                    onClasses: {
                        checkbox: "checked",
                        radio: "selected"
                    },
                    offClasses: {
                        checkbox: "unchecked",
                        radio: "unselected"
                    }
                } );

                FancyForm.start( true, {
                    onClasses: {
                        checkbox: "checked",
                        radio: "selected"
                    },
                    offClasses: {
                        checkbox: "unchecked",
                        radio: "unselected"
                    },
                    onSelect: function(obj){
                        document.getElementById("stat").value = obj.name;
                    }
                } );

            });

        // --></script>
    </head>
    <body>
    <h1>FancyFormサンプル</h1>
        <form name="dataForm1" action="./check.cgi" method="get">
            【使用OS】
            <label><input type="radio" name="osType" id="r1" checked>MacOS X</label>
            <label><input type="radio" name="osType" id="r2">UNIX</label>
            <label><input type="radio" name="osType" id="r3">Windows</label>
            【主な使用言語】
            <label><input type="checkbox" name="jp" id="c1" checked>日本語</label>
            <label><input type="checkbox" name="en" id="c2">英語</label>
            <label><input type="checkbox" name="etc" id="c3">その他の言語</label>
            選択結果：<input type="text" id="stat"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>