web-dev-qa-db-ja.com

jQueryでシリアル化されたフォームデータを変更するにはどうすればよいですか？

AJAXでフォームを送信しようとしているため、データをserialize（）する必要があります。しかし、私はfckEditorを使用しており、jQueryはそれを処理する方法を知らないので、シリアル化の後、手動で値を変更しようとしていますが、これまでのところ運はありません...任意のアイデア

if(content_val!=""){
    var values = $("#frmblog").serialize();
    values.content = content_val; //content_val is the manually fetched data which I am trying to insert into the serialized content.
    alert(content_val); alert(values);
}
jqueryserializationfckeditor
78
Bluemagica

serialize は、フォームフィールドを含むURLエンコードされた文字列を返します。追加する必要がある場合は、標準のURLエンコード文字列ルールを使用して追加します。例：

var values = $("#frmblog").serialize();
values += "&content=" + encodeURIComponent(content_val);

（上記は、values呼び出しの後、serializeに常に1つの値があると想定しています。それが必ずしも当てはまらない場合は、&は、追加する前にvaluesが空であるかどうかに基づいています。）

あるいは、必要に応じて、 serializeArray を使用してから、配列に追加して jQuery.param 結果をクエリ文字列に変換しますが、長い道のりのようです。

// You can also do this, but it seems a long way 'round
var values = $("#frmblog").serializeArray();
values.Push({
    name: "content",
    value: content_val
});
values = jQuery.param(values);

更新：後で追加したコメントであなたは言った：

問題は、消毒プロセス中に「コンテンツ」キーにいくつかのデフォルト値が設定されているため、新しい値を添付するだけではなく、その中にある値を更新する必要があることです」

それは物事を変えます。 URLエンコードされた文字列内でcontentを探すのは苦痛なので、配列を使用します。

var values, index;

// Get the parameters as an array
values = $("#frmblog").serializeArray();

// Find and replace `content` if there
for (index = 0; index < values.length; ++index) {
    if (values[index].name == "content") {
        values[index].value = content_val;
        break;
    }
}

// Add it if it wasn't there
if (index >= values.length) {
    values.Push({
        name: "content",
        value: content_val
    });
}

// Convert to URL-encoded string
values = jQuery.param(values);

おそらくこれを再利用可能な機能にしたいと思うでしょう。

146
T.J. Crowder

@ T.Jの回答に基づく完全なjqueryプラグインを次に示します。あなたは電話することができます

$('form#myForm').awesomeFormSerializer({
    foo: 'bar',
})

パラメータ 'foo'を値 'bar'（またはオブジェクトに追加する他のパラメータ）で置換または追加します

jQueryプラグイン：

// Not builtin http://stackoverflow.com/a/5075798/2832282
(function ( $ ) {
    // Pass an object of key/vals to override
    $.fn.awesomeFormSerializer = function(overrides) {
        // Get the parameters as an array
        var newParams = this.serializeArray();

        for(var key in overrides) {
            var newVal = overrides[key]
            // Find and replace `content` if there
            for (index = 0; index < newParams.length; ++index) {
                if (newParams[index].name == key) {
                    newParams[index].value = newVal;
                    break;
                }
            }

            // Add it if it wasn't there
            if (index >= newParams.length) {
                newParams.Push({
                    name: key,
                    value: newVal
                });
            }
        }

        // Convert to URL-encoded string
        return $.param(newParams);
    }
}( jQuery ));
4
Cyril Duchon-Doris

現在、JQueryバージョンを使用しています。 Uは、代わりにこれを使用して、現在送信された値（最短のもの）を編集できます。

var values = $("#frmblog").serializeArray();
values.find(input => input.name == 'content').value = content_val;
console.log(values);
0
Yanuarizal Kurnia