Form.Observerクラス

prototype.js解読 
【抜粋】
Form.Observer = Class.create();
Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
  getValue: function() {
    return Form.serialize(this.element);
  }
});

前述Abstract.TimedObserverクラスを継承しています。指定フォームがもつ入力要素すべての値を指定間隔で監視して、変化があった場合に、指定関数を実行させるインスタンスを生成します。

getValueメソッド

前述Abstract.TimedObserverクラスを継承する場合に必要なメソッド。対象フォーム(elementプロパティ)がもつ入力要素すべての値を、前述Form.serializeメソッドにより文字列として取得し、返却しています。

【例】
<html>
<head>
<title></title>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script>
function init(){
  new Form.Element.Observer(document.FORMNAME.TEXT, 1, test1);
  new Form.Element.Observer(document.FORMNAME.RADIO[0], 1, test1);
  new Form.Element.Observer(document.FORMNAME.SELECT, 1, test1);
  new Form.Observer(document.FORMNAME, 1, test2);
}
function test1(element, value){
  Element.update('test1', element.name + " cahnged to " + value);
}
function test2(element, value){
  Element.update('test2', element.name + " cahnged to " + value);
}
</script>
</head>
<body onload="init();">
<form name="FORMNAME" onsubmit="return false;">
<input type="text" name="TEXT" value="テキストボックス"/>
<input type="radio" name="RADIO" value="RADIO1" checked/>
<input type="radio" name="RADIO" value="RADIO2"/>
<select size="3" name="SELECT">
  <option value="OPTION1">オプション１</option>
  <option value="OPTION2">オプション２</option>
  <option value="OPTION3" selected>オプション３</option>
  <option value="OPTION4">オプション４</option>
</select>
</form>
<div id="test1">element</div>
<div id="test2">form</div>
</body>
</html>

入力要素の内容を変更すると、表示メッセージが変わります。

radioチェック変更時にundefinedになるのは、一つ目のradioしか監視していないからです。複数の同名要素を監視したい場合はクラスを自作したほうがいいかもしれません。

前述Form.Element.Observerクラスで書いたとおり、上の例でselectタグにmultiple指定をすると、デフォルト表示が「element」の要素は、常にselectタグの選択内容を表示します。他の要素を変更しても、すぐに表示が戻されます・・・。