jQuery-Ajaxを使用せずに、単一のリクエストで複数のフォームを送信します

javascript jquery
jQuery-Ajaxを使用せずに、単一のリクエストで複数のフォームを送信します

いくつかのフォームがあるページがあります。 フォームの1つ(フォームAなど)を送信しようとしています(送信処理後に結果ページを読み込む必要があるため、Ajax経由ではありません)が、別のフォームのコンテンツ(フォームBなど)を一緒に送信する必要がありますフォームA、すなわち フォームA + Bのコンテンツは、1つのリクエストとして同じURLにまとめて送信する必要があります。前述したように、Ajaxリクエストとしては送信しないでください。

送信はPOSTリクエストによるものでなければなりません。 また、フォームには、ファイルのアップロード以外のフィールドのみが含まれます(つまり、 入力、選択、テキストエリアフィールド)。

私は次のような提案を見ました

or

フォームは異なるリクエストで送信されるか、Ajaxを介して送信されるため、これらは私の場合と一致しないことに注意してください。

(jQueryの)serialize()によってフォームの1つのコンテンツを取得することを考えていましたが、その文字列をPOSTによって送信されたフォームにどのように添付しますか?

それとも、これを達成する他のアイデアがありますか?

溶液:

SheepyとYoTsumiのアイデアに基づいて、次のコードを作成しました。 また、次のリンクからPointyの回答を使用しています。

//Arguments: "name"s of forms to submit.
//First argument: the form which according to its "action" all other forms will be submitted.
//Example: mergeForms("form1","form2","form3","form4")
function mergeForms() {
    var forms = [];
    $.each($.makeArray(arguments), function(index, value) {
        forms[index] = document.forms[value];
    });
    var targetForm = forms[0];
    $.each(forms, function(i, f) {
        if (i != 0) {
            $(f).find('input, select, textarea')
                .hide()
                .appendTo($(targetForm));
        }
    });
    $(targetForm).submit();
}

  13  6


ベストアンサー

さて、送信する前にform2からform1にデータをコピーする必要があります。 始めるための基本は次のとおりです。

$.each ( $('#form2 input, #form2 select, #form2 textarea').serializeArray(), function ( i, obj ) {
  $('').prop( obj ).appendTo( $('#form1') );
} );

この関数は、form2から入力を選択し、現在の値を取得してから、それぞれに対して新しい非表示入力を作成し、form1に追加します。

シナリオによっては、最初にform1で同じ名前の入力の存在を確認することもできます。

8


(サブフィールドではなく)ポストリクエストにデータを直接注入するソリューション

    function merge() {
        $result = $("#result");
        $("#form1 input, #form2 input, #form1 select, #form2 select, #form1 textarea, #form2 textarea").each(function() {
            $result.append("<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"' />");
        });
    }

3


一度に1つのリクエストしか実行できず、AJAXを使用しない限りページをリロードします。 他の唯一のオプションは、2つのフォームのシリアル化を連結するスクリプトを作成することですが、その時点で、1つの大きなフォームを使用しないのはなぜですか。

編集:2つのフォームを組み合わせるために、提供した2番目のリンクの回答にこの例があります。

2


フォームA:

フォームB:

1


ソリューションがフォームを別の非表示フォームにコピーすることを発見しましたが、裏側は元のフォームがクリアされ、元のフォームのそのような編集(フォーム検証エラー後など)は不可能です。

これを解決するために、非表示フォームに追加する前に要素を複製しようとしました。 このようにコードを編集しました:

//Arguments: "name"s of forms to submit.
//First argument: the form which according to its "action" all other forms will be submitted.
//Example: mergeForms("form1","form2","form3","form4")
function mergeForms() {
        var forms = [];
        $.each($.makeArray(arguments), function(index, value) {
            forms[index] = document.forms[value];
        });
        var targetForm = forms[0];
        $.each(forms, function(i, f) {
            if (i != 0) {
                $(f).find('input, select, textarea')
                    .clone()
                    .hide()
                    .appendTo($(targetForm));
            }
        });

残念ながら、select要素の選択された値はコピーされません。

誰かがこのスクリプトを改善するのを手伝ってくれることを願っています

0


このようなことができます

$('#SubmitBtn).click(function () {
        $("#formId").attr("action", "http://www.YourSite.com/");
        $("#formId").attr("method", "post");
        $("#formId").attr("target","_blank");
        $('#formId').submit();
    });

これにより、新しいウィンドウでhttp://www.YourSite.com/にが送信されます

-1


タイトルとURLをコピーしました