Ajax JavaScript PHP Web その他

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

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

prototype.js

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

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

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

---

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

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

---

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

このメソッドに渡される引数は2つあります。
・第1引数 … 監視対象Formの参照
・第2引数 … シリアライズされたFormの値
【other】（例 ： "text1=abc&text2=def&text3=ghi"）【/other】

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

new Form.EventObserver( id , method );

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

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

[Ajax - prototype.js - Form]

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

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

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

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

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

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

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