私は4つのdivでスプライスされた大きなフォームを持っています、各divはステップを表し、すべてが1つのフォームで囲まれています、私の問題は、新しいフィールドを追加する機能があるため、フォームが大きくなりすぎていることです(写真、テキスト、言語)動的に、
したがって、このフォームを部分的に送信するオプションがあるかどうか疑問に思っていました。サーバーには投稿ごとに20フィールドの制限があり、この設定を変更することはできません。
フィールド値はいつでも大きなjson配列にパックし、エンコードしてjQuery.ajaxで投稿できます。それは大きな単一のフィールドのように見えます。サーバー側では、それをデコードして出来上がり、制限をバイパスすることができます。しかし、正直なところ、それはどのようなサーバーですか?私はこれまでこの種の制限を聞いたことがありません。
別の解決策は、サーバー側(たとえば、セッションストレージ内)でフォームの状態を複製し、ajax呼び出しを行ってセッションストアの個々のフィールドを更新することです。たとえば、ユーザーがフィールドを離れるとき、その単一のフィールドの値をサーバーに送信すると、サーバーはセッションストアのフィールド値を更新します。
他にも多くの可能な解決策があります。
サーバーの制限が気になる場合は、jSONでフォームをシリアル化し、これを単一のパラメーターとして渡すことができます
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
お気に入り
var data = $("form#myform").serializeObject();
window.location = "url?data="+encodeURIComponent(data);
サーバーよりも
$data = json_decode($_GET["data"]);
foreach($data as $row)
{
//Do What ever you want with $row
}
または、$_POSTを使用する必要がある場合
var post_data = { data : data};
$.post('url', post_data ,function(data) {
console.log(data);
});
@Codyの回答はかなりうまく機能しますが、ファイル入力に問題がありました。
このライブラリhttp://jquery.malsup.com/form/もうまく機能し、ファイルを送信し、変更なしで内部配列をサポートすることができました。
持っている各ステップに関連付けられた複数のフォームを作成してみませんか?