jQuery - 通过单个请求提交多个表单,没有Ajax

Question

我有一个页面有几种形式.我正在尝试提交其中一个表单(比如表单A)(不是通过Ajax,因为我需要在处理提交后加载结果页面),但是我需要另一个表单的内容(比如表单B)一起提交表单A,即表单A + B的内容应作为一个请求一起提交给SAME URL,如前所述,不作为Ajax请求.

提交应该是POST请求.此外,表单仅包含非文件上载的字段(即输入,选择,textarea字段).

我在这里看到过诸如此类的建议

在jQuery中发布/提交多个表单

要么

使用单个按钮提交两个表单

但要注意这些与我的情况不符,因为表单是在不同的请求中提交的,和/或它们是通过Ajax提交的.

我想通过(jQuery的)serialize()获取其中一个表单的内容,但是如何将该字符串附加到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();
}

Answer 1

好吧,你必须在提交之前将数据从form2复制到form1.这是帮助您入门的基础知识:

$.each ( $('#form2 input, #form2 select, #form2 textarea').serializeArray(), function ( i, obj ) {
  $('<input type="hidden">').prop( obj ).appendTo( $('#form1') );
} );

此函数将从form2中选择输入,获取它们的当前值,然后为每个输入创建一个新的隐藏输入并将它们添加到form1.

根据您的方案,您可能希望首先检查form1上具有相同名称的输入的存在.