JavaScriptフォームの順序付けの方法の詳細

本論文では、javascriptでフォームの順序付けを行う方法を紹介します.実例を通じて理解を深めます.必要な友達が参考にしてください.
JavaScriptでは、フォームフィールドのtype属性を利用して、nameとvalue属性とともにフォームのシーケンスを実現することができます.
まず、フォーム提出中に、ブラウザがどのようにサーバにデータを送信しているかを確認します.フォームフィールドの名前と値をURL符号化し、和記号(&)で分割します.無効なフォームフィールドを送信しません.チェックボックスとラジオボタンのみを送信します.typeは「reet」と「button」のボタンを送信しません.選択ボックスの各選択値の項目を個別に選択します.提出ボタンをクリックしてフォームを提出する場合も、提出ボタンを送信します.送信ボタンは送信されません.typeが「イメージ」の「input」の要素も含まれます.選択された「オプトモーション」要素のvalue特性の値です.要素にvalue特性がない場合は、「option」要素のテキスト値です.フォームの順序付け中には、一般的にボタンフィールドは含まれません.結果文字列は他の方法で提出される可能性が高いからです.その他上記の規則は全部従うべきです.
フォームの順序付けを実行するコード:

function serialize(form) {

    var parts = [],

        field = null,

        i,

        len,

        j,

        optLen,

        option,

        optValue;



    for (i = 0, len = form.elements.length; i < len; i++) {

        field = form.elements[i];



        switch (field.type) {

        case "select-one":

        case "select-multiple":



            if (field.name.length) {

                for (j = 0, optLen = field.options.length; j < optLen; j++) {

                    option = field.options[j];

                    if (option.selected) {

                        optValue = "";

                        if (option.hasAttribute) {

                            optValue = (option.hasAttribute("value") ? option.value : option.text);

                        } else {

                            optValue = (option.attributes["value"].specified ? option.value : option.text);

                        }

                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));

                    }

                }

            }

            break;



        case undefined:

            //   

        case "file":

            //    

        case "submit":

            //    

        case "reset":

            //    

        case "button":

            //     

            break;



        case "radio":

            //    

        case "checkbox":

            //   

            if (!field.checked) {

                break;

            }

            /*         */



        default:

            //            

            if (field.name.length) {

                parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));

            }

        }

    }

    return parts.join("&");

}



var btn = document.getElementById("serialize-btn");

EventUtil.addHandler(btn, "click", function (event) {

    var form = document.forms[0];

    alert(serialize(form));

});

　　
面というserialize()関数は、最初にpartsという配列を定義し、作成する文字列の各部分を保存します.
その後、フォームフィールドをforループで繰り返し、field変数に保存します.フィールドの参照を取得した後、switch文を使ってtype属性を検出します.プログレッシブプロセスで最も厄介なのは、「select」要素であり、単一のボックスでもあり得るし、複数のボックスでもあり得る.値は選択中の項目があり、複数のボックスはゼロまたは複数の選択中の項目があり得る.ここのコードはこの2つの選択枠に適用され、オプションボックスの数はブラウザで制御されます.選択中の項目が見つかったら、どのような値を使うかを確認する必要があります.value特性が存在しない場合、またはその特性が存在しますが、値が空の文字列である場合は、オプションのテキストを使用して置換します.この特性をチェックするためには、DOM対応のブラウザではhasAttribute()方法が必要であり、IEでは特性のspecified属性が必要である.
フォームに「fieldset」要素が含まれている場合、要素セットに表示されますが、type属性はありません.したがって、type属性が定義されていない場合は、それを序列化する必要はありません.同様に、各種ボタンおよびファイル入力フィールドについても同様である.単一選択ボタンとチェックボックスに対して、そのcheced属性がfalseに設定されているかどうかを確認します.そうであれば、switch文を終了します.checked属性がtureであれば、default文を実行し続け、現在のフィールドの名前と値をエンコードし、parts配列に追加します.関数の最後のステップは、join()を使って文字列全体を書式設定します.つまり、和記号で各フォームフィールドを分割します.
最後に、serialize()関数は、クエリー文字列の形式で、順序付け後の文字列を出力します.