Ajax JavaScript PHP Web その他

入力項目を監視して、値が変更された場合に通知します。

通知されるタイミングは、入力項目から他の項目にフォーカスが移動した時です。

prototype.js

使用バージョン：1.5.1　公式サイト

1. ダウンロードしたprototype.jsを読み込みます。

<script type="text/javascript"
    src="prototype.js"></script>

---

2. Form.Element.EventObserverメソッドを実行して、Formの監視を開始します。

[HTML]
<!-- 監視対象のtextです -->
<input type="text" name="text1" id="text1" />
  :
  :
[JavaScript]
window.onload = function() {
  // "text1" の監視を開始します
  new Form.Element.EventObserver("text1", changeValueEvent);
}

---

3. 監視対象入力項目の値が変更された場合、Form.Element.EventObserverメソッドの第2引数で指定したメソッドが実行されます。

このメソッドに渡される引数は2つあります。
・第1引数 … 監視対象入力項目の参照
・第2引数 … 現在(変更後)の入力項目の値

// 値が変更された時に実行されるメソッド
function changeValueEvent(element, value) {
  alert("現在の入力項目の値 = '" + value + "'");
}

new Form.Element.EventObserver( id , method );

id	監視対象入力項目のID
method	入力値が変更された場合に実行されるメソッド

↓インラインフレーム内でサンプルが動作しています。

[Ajax - prototype.js - Form]

入力オブジェクトの値(value)を取得する 　【$F】

フォーカスを移動して値を選択する 　【Field.activate】

空欄チェックを行う 　【Field.present】

Formの内容をシリアライズする 　【Form.serialize】

一番最初に有効になっているエレメントを取得する 　【Form.findFirstElement】

一番最初に有効になっているエレメントにフォーカスす 　【Form.focusFirstElement】

Form内全ての入力項目値の変更を監視する 　【Form.EventObserver】