FORMとの連動

入力への連動

[NN4ok]

FORMのINPUTフィールドが変更されたというイベントを捕まえる ことができます。<INPUT>タグにONCHANGE引数を使います。

次のフォームは、左側の欄に数字を入力すると即座に 右側に答えを計算し格納してくれるフォームです。 IEでは動作しません。次の改良版を参考にしてください。

↓に値をいれてリターンを押してください。
x 2 =
ソースリスト 
<FORM METHOD="POST" NAME="f">
<INPUT NAME="num" SIZE="5" onChange="change(this.form, this)">
x 2 = <INPUT NAME="ans" SIZE="5">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
function change(form, val) {
	in_val = val.value
	out_val = in_val * 2;
	form.ans.value = out_val;
}

</SCRIPT>
フィールドのonChangeイベントハンドラのchange(this.form, this)では、 thisが(左側の)フィールド自体を指し、this.formで フィールドの含まれるフォーム全体を指定しています。

値が変更されると関数change()が呼び出され、まず フィールドの値をval.value[変数valの指すフィールドのvalue]で取り出します。 そして、その値を2倍し、form.ans.value(フォームformのansという 名前のフィールドのvalue)に格納しています。

フォームやフォームの入力要素(<INPUT>)には NAMEアトリビュートで名前をつけておかなければスクリプトの中から 参照できないことに注意が必要です。

左側のフィールドにはonChangeイベントハンドラを設定していないため、 入力しても何も起こりません。右の欄を埋めると左の欄が更新される ようなスクリプトも同じように実現できるので練習にやってみましょう。