コアポイント

JavaScriptの
• 関數(shù)は、単一のオーバーロードフォームパラメーター（フォームのDOMノードまたは文字列ID）を受け入れることにより、任意のフォームへの更新を検出し、ユーザーが変更したフォーム要素ノードの配列を返します。 FormChanges()
フォームが見つからない場合、関數(shù)はnullを返し、すべてのJavaScriptライブラリと互換性があるように設(shè)計(jì)されており、IE6やIE7を含むすべての最新のブラウザーで実行されます。
関數(shù)の実際のアプリケーションには、作成したフィールド更新の數(shù)をユーザーに思い出させるか、非表示の値を更新して変更が行われていないことを示し、サーバー側(cè)のコードがフィールド検証とデータベースの更新をスキップできるようにします。
• FormChanges()
前の投稿では、ユーザーが個(gè)々のフォーム要素を変更したかどうかを確認(rèn)する方法を?qū)Wびました。今日、この情報(bào)を使用して、あらゆるフォームの更新を検出できるJavaScriptコードを書きます。いくつかの例とコードリンクを次に示します。-コードデモページ -

javaScriptコード - すべてのコードと例のzipファイル

FormChanges()

予防策

優(yōu)れた開発者として、コードを作成する前に要件を定義します。-単一のオーバーロードされたフォーム

パラメーター - フォームのDOMノードまたは文字列IDを受け入れる関數(shù)

を書き込みます。 - この関數(shù)は、ユーザーが変更したフォーム要素ノードの配列を返します。これにより、どのフィールドが変更されたか、または配列が空の場合、フィールドが変更されていないことを意味します。 - フォームが見つからない場合、関數(shù)はnullを返します。 - 特定のJavaScriptライブラリに依存していないため、機(jī)能はすべてのライブラリと互換性があります。 -IE6またはIE7を含むすべての最新のブラウザで実行する必要があります。 FormChanges() formChanges（）function

理解のために、以下は私たちの関數(shù)の始まりです：

フォームパラメーターをオーバーロードしています - それはDOM要素になる可能性がありますが、ID文字列の場合、DOMで要素を見つける必要があります：

function FormChanges(form) {

フォームノードがない場合、機(jī)能はそれ以上の操作なしでnullを返します：

if (typeof form == "string") form = document.getElementById(form);

関數(shù)全體で使用するいくつかの変數(shù)を宣言します。-

は、返されたユーザーの更新されたフォーム要素アレイです -

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

はフォーム要素ノードです -

要素が変更された場合、選択ボックスのデフォルトオプション - changed、n、cdef oメインループを開始できるようになりました。これにより、各フォーム要素が順番にチェックされます。 olは最初にfalseに設(shè)定されており、チェックしている要素が変更されていないことを示しています。

function FormChanges(form) {

次に、ノード名（入力、Textarea、Select）を抽出し、Switchステートメントで確認(rèn)します。選択ノードと非選択ノードのみを探しているため、Switchステートメントは厳密に必要ではありません。ただし、読みやすくなり、新しいノードタイプを?qū)毪工腚Hにノードタイプを追加できるようになります。

ほとんどのブラウザは大文字でノード名を返すことに注意してください。しかし、セキュリティ上の理由から、常に小文字に文字列を変換します。

if (typeof form == "string") form = document.getElementById(form);

最初のケースステートメントは、選択ドロップダウンリストを評(píng)価します。これは、選択されたプロパティとデフォルト選択されたプロパティを比較するためにすべてのサブオプション要素をループする必要があるため、最も複雑なチェックです。

ループは、「選択された」プロパティを使用して最後のオプションにdefを設(shè)定します。ラジオボックスがある場合、DEFをノードのSelectedIndexプロパティと比較して、「選択された」プロパティにオプションまたは複數(shù)のオプション要素がない場合を確認(rèn)します（完全な説明については、前の投稿を參照）。

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

ここで、入力要素とTextarea要素を処理する必要があります。私たちのケース「Textarea」：ステートメントはBreakを使用しないため、「入力」というケースに分類されることに注意してください。

チェックボックスとラジオボタンは、チェックされたプロパティとデフォルトチェックされたプロパティを比較しますが、他のすべてのタイプはその値をdefaultValueと比較します。

var changed = [], n, c, def, o, ol, opt;

Cの値がtrueの場合、要素が変更されたため、変更された配列に追加します。ループが完了するようになりました：

for (var e = 0, el = form.elements.length; e < el; e++) {
    n = form.elements[e];
    c = false;

変更された配列を返して関數(shù)を終了するだけです：

switch (n.nodeName.toLowerCase()) {

例の例次のフォームを作成したとします：

次のコードを使用して、ユーザーがフォームフィールドを変更したかどうかを確認(rèn)できます。

    // select boxes
    case "select":
        def = 0;
        for (o = 0, ol = n.options.length; o < ol; o++) {
            opt = n.options[o];
            if (opt.selected) def = o;
        }
        c = (n.selectedIndex != def);
        break;

または、変更が発生しない場合、フォームを送信するときに、非表示の「変更」値を「いいえ」に更新できます。これにより、サーバー側(cè)のコードがフィールド検証とデータベースの更新をスキップできるようになります。

（注：「はい」を「いいえ」に変更すると、JavaScriptが利用できない場合はサーバーが常に著信データを処理するため、エレガントに格下げされます。）

        // input / textarea
        case "textarea":
        case "input":
            switch (n.type.toLowerCase()) {
                case "checkbox":
                case "radio":
                    // checkbox / radio
                    c = (n.checked != n.defaultChecked);
                    break;
                default:
                    // standard values
                    c = (n.value != n.defaultValue);
                    break;
            }
            break;
    }

お役に立てば幸いです。

    if (c) changed.push(n);
}

（元のテキストのFAQの一部がコード関數(shù)とはほとんど関係がないため、FAQの部分は省略されています。これはコード関數(shù)の追加の説明であり、擬似オリジナルの目標(biāo)と矛盾しています。

以上がjavascriptで一般的なフォーム更新検出機(jī)能を書き込む方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。