javascriptで一般的なフォーム更新検出機能を書き込む方法

コアポイント

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

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

FormChanges()

予防策

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

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

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

理解のために、以下は私たちの関数の始まりです：

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

function FormChanges(form) {

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

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

関数全体で使用するいくつかの変数を宣言します。-

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

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

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

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

function FormChanges(form) {

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

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

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

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

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

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;

変更された配列を返して関数を終了するだけです：

switch (n.nodeName.toLowerCase()) {

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

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

    // 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;

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

（注：「はい」を「いいえ」に変更すると、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の一部がコード関数とはほとんど関係がないため、FAQの部分は省略されています。これはコード関数の追加の説明であり、擬似オリジナルの目標と矛盾しています。

以上がjavascriptで一般的なフォーム更新検出機能を書き込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。