第4回

  フォーム、イベント  


フォーム

 いままでも、フォームを、入力や出力のために使用してきましたが、フォーム内のエレメントには、次のものがあります。

button ボタン
checkbox   チェックボックス(複数選択可能)
radio ラジオボタン(ひとつだけ選択可能)
reset リセットボタン
select 選択ボックス(リストボックス または コンボボックス)  
submit 送信ボタン
text 1行のテキスト
textarea 複数行のテキスト

 この中の、button, checkbox, radio, text を使用した例です。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc()
    {
        var i,DatA=0;
        with(document.form01)
        {
            for(i=0;i<length;i++)
            {
                if(elements[i].type=="checkbox")
                {
                    if(elements[i].checked)
                        DatA += eval(elements[i].value);
                }
            }
        if(r01[0].checked)
            DatA *= 0.95;
        e01.value = DatA;
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
■購入する商品を選択してください。<HR>
<INPUT TYPE="checkbox" VALUE="10000">本体(\10,000)<BR>
<INPUT TYPE="checkbox" VALUE="2000">オプションA(\2,000)<BR>  
<INPUT TYPE="checkbox" VALUE="3000">オプションB(\3,000)<P>
■会員は 5%値引きします。<HR>
<INPUT TYPE="radio" NAME="r01" CHECKED>会員です。<BR>
<INPUT TYPE="radio" NAME="r01">会員ではありません。<P>
金額:<INPUT TYPE="text" NAME="e01">
<INPUT TYPE="button" VALUE="計算" onClick="calc()"><P>
</FORM>
</BODY>
</HTML>

 length は、フォーム内のエレメント数を返します。type は、エレメントの種類を返します。
 フォーム内のエレメントを参照するには、<INPUT>内のNAME属性で指定しているエレメント名または、フォーム内の何番目のエレメントかを、elements[参照番号] という形式で指定します。最初のエレメントは elements[0] です。

length フォーム内のエレメント数 F名.length
type エレメントの種類を参照 F名.E名.type
value エレメントの文字列を参照/設定 F名.E名.value
defaultValue   テキスト、テキストエリアの初期文字列   F名.E名.defaultValue
text セレクトの項目を参照/設定 F名.E名.options[参照番号].text  
F名: document.フォーム名  E名: エレメント名 または elements[参照番号]

 この例では、「計算」という button をクリックすると、calc() という関数を実行しますが、for() を使用して、全エレメントの種類をはじから調べ、種類が「チェックボックス」で、チェックされていたら、VALUE属性で指定されている値を加算しています。
 この後に、ラジオボタンの1番目の項目がチェックされているか調べて、チェックされていたら0.95倍して、テキストボックスに値を代入しています。

 次の例では、radio(ラジオボタン)の代わりに、select(選択ボックス)を使用しています。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function calc()
    {
        var i,DatA=0;
        with(document.form01)
        {
            for(i=0;i<length;i++)
            {
                if(elements[i].type=="checkbox")
                {
                    if(elements[i].checked)
                        DatA += eval(elements[i].value);
                }
            }
        DatA*=r01.options[r01.selectedIndex].value;
        e01.value = DatA;
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
■購入する商品を選択してください。<HR>
<INPUT TYPE="checkbox" VALUE="10000">本体(\10,000)<BR>
<INPUT TYPE="checkbox" VALUE="2000">オプションA(\2,000)<BR>  
<INPUT TYPE="checkbox" VALUE="3000">オプションB(\3,000)<P>
■会員は 5%値引きします。<HR>
<SELECT NAME="r01" SIZE="3">
<OPTION VALUE="0.95" SELECTED>会員です。</OPTION>
<OPTION VALUE="1">会員ではありません。</OPTION>
</SELECT><P>
金額:<INPUT TYPE="text" NAME="e01">
<INPUT TYPE="button" VALUE="計算" onClick="calc()"><P>
</FORM>
</BODY>
</HTML>

 select の選択項目の番号は selectedIndex で知ることができ、選択されたオプションの value(値)を、商品価格の合計に乗じています。なお、<SELECT>内のSIZE属性を省略するか、"1"を指定すると、1行しか表示されない、コンボボックスの外観になります。

イベント

 前の項目でも、フォームの button をクリックしたとき、関数を実行するようにしていますが、これをイベントといいます。イベントは、フォーム以外にも、いろいろなところで使用することができます。

 ● ページの読み込み時/切り替え時のイベント
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="alert('こんにちは!')" onUnload="alert('ばいばい!!')">  
<A HREF="Document023.htm">一つ前の例に戻る</A>
</BODY>
</HTML>

 ここをクリックしてください。onLoad はページの読み込み時に発生するイベントで、alert で こんにちは! と表示しています。、 onUnload はページ切り替え時に発生するイベントで、一つ前の例に戻る という部分をクリックすると、alert で ばいばい!! と表示しています。

 ● マウスクリック時のイベント

 マウスボタンを押して離したときに発生するイベント onClick は、いままで、フォームの button を押したときに関数を実行する目的で使用してきましたが、その他のときにも使用できます。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function msg0(elm)
    {
        var DatA;
        DatA = elm.type + "がクリックされました。" + "\n";
        document.form01.txt01.value += DatA;
    }
    function msg1()
    {
        document.form01.txt01.value += "リンクがクリックされました" + "\n";
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
どれかを、クリックしてください。
<INPUT TYPE="reset">
<HR><A HREF="JavaScript:;" onClick="msg1()">ここをクリック</A><BR>
<INPUT TYPE="button" VALUE="ボタン" onClick="msg0(this)"><BR>
<INPUT TYPE="checkbox" onClick="msg0(this)">チェックボックス<BR>
<INPUT TYPE="radio" NAME="r01" onClick="msg0(this)">ラジオ1
<INPUT TYPE="radio" NAME="r01" onClick="msg0(this)">ラジオ2<BR>
<HR><TEXTAREA NAME="txt01" ROWS=20 COLS=40></TEXTAREA>
</FORM>
</BODY>
</HTML>

 <A HREF="JavaScript:;" という部分は、一つ前の例のように、ふつうはリンク先URLが書かれます。ここでは、どこにも移動しないように、何もしない命令を書いています。
 各エレメントをクリックしたときのイベント onClick で実行される関数 msg0()カッコ内の引数 this は、カレントオブジェクトへの参照をあらわすことができます。関数 msg0()では、引数として受け取ったオブジェクト(フォームのエレメント)のタイプを、テキストエリアに表示しています。msg1()は、リンクをクリックしたときのメッセージを、同様にテキストエリアに表示しています。

 ● フォーカス移動時のイベント/フォーカスの移動

 Tab やマウスカーソルで、フォーカスが移動したときに発生するイベントです。onFocus はフォーカスが合ったとき、onBlur はフォーカスが離れたときのイベントです。また、フォーカスを移動させることもできます。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function msg0(elm)
    {
        DatA = new Array("全角で","半角英数で(aaa@bbb.cc.dd)","半角英数で(111-222-3333)");
        document.form01.txt01.value = DatA[elm];
    }
    function msg1(elm)
    {
        if(elm.value=="")
            document.form01.txt02.value = "入力されませんでした。";
        else
            document.form01.txt02.value = elm.value + "さん ですね。";
    }
    function chk0()
    {
        var i;
        with(document.form01)
        {
            for(i=0;i<=3;i++)
            {
                if(elements[i].type=="text")
                {
                    if(elements[i].value=="")
                    {
                        elements[i].focus();
                        chkB.checked=false;
                        alert("全項目入力されていないので登録できません。");
                        break;
                    }
                }
            }
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
入力してください。<INPUT TYPE="reset"><P>
名前:<INPUT TYPE="text" onFocus="msg0(0)" onBlur="msg1(this)"><BR>
e-mail:<INPUT TYPE="text" onFocus="msg0(1) "onBlur="msg1(this)"><BR>
TEL:<INPUT TYPE="text" onFocus="msg0(2) "onBlur="msg1(this)"><BR>
登録する<INPUT TYPE="checkbox" NAME="chkB" onFocus="chk0()"><BR>
<HR>メッセージ1<INPUT TYPE="text" NAME="txt01" SIZE="60"><BR>
メッセージ2<INPUT TYPE="text" NAME="txt02" SIZE="60">
</FORM>
</BODY>
</HTML>

 「メッセージ1」テキストボックスには、 onFocus イベントによって関数 msg0()が実行され、入力の方法と例が表示されます。「メッセージ2」テキストボックスには、onBlur イベントによって関数 msg1()が実行され、入力結果が表示されます。全項目入力しないで「登録する」をチェックしようとすると、onFocus イベントで 関数 chk0() が実行され、入力していない項目に focus()でフォーカスを移動させて、alert で警告します。

onFocus   フォーカスが合ったときのイベント  
onBlur フォーカスが離れたときのイベント
focus() フォーカスを合わせる
blur() フォーカスを外す
select() 文字列を選択状態にする
click() クリックする
checked チェック状態を参照/設定