jQuery - 通过单个请求提交多个表单，无需 Ajax

Question

我有一个包含多个表单的页面。 我正在尝试提交其中一个表单（比如表单 A）（不是通过 Ajax，因为我需要在处理提交后加载结果页面），但是我需要另一个表单的内容（比如表单 B）与一起提交表单 A，即表单 A + B 的内容应该作为一个请求一起提交到同一个 URL，并且如我之前所说，而不是作为 Ajax 请求。

提交应通过 POST 请求。此外，表单仅包含不是文件上传的字段（即输入、选择、文本区域字段）。

我在这里看到了一些建议，例如

Posting/submitting multiple forms in jQuery

或

Submitting two forms with a single button

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

我正在考虑通过（jQuery 的）serialize() 获取其中一个表单的内容，但是如何将该字符串附加到通过 POST 提交的表单？

或者您可能有其他想法如何做到这一点？

解决方案：

基于Sheepy和YoTsumi的思路，我写了如下代码。我也在使用 Pointy 来自以下链接的答案：

submit multiple forms to same page

//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 上是否存在同名输入。

Answer 2

直接在 post 请求中（而不是子字段）注入数据的解决方案

<form id="form1">
    <input ... />
    <input ... />
</form>

<form id="form2">
    <input ... />
    <input ... />
</form>

<form id="result" action="..." method="POST" onsubmit="merge(); return true;">
    <input type="submit" />
</form>


<script type="text/javascript">
    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()+"' />");
        });
    }
</script>

Answer 3

您一次只能执行一个请求，除非您使用 AJAX，否则会重新加载页面。唯一的另一种选择是创建一个脚本来连接您的两种形式的序列化 - 但在这一点上，您为什么不只使用一种大形式..

编辑：为了您结合这两种形式，在您提供的第二个链接的答案中有一个示例。

Answer 4

表格 A：

<form method="post" action="next.html" onsubmit="this.formbVal.value = $('#formb').serialize(); return true;">
    <input type="hidden" name="formbVal" value="" />
    <input type="submit">
</form>

表格 B：

<form id="formb" method="post" action="#" onsubmit="return false;">
</form>

Answer 5

我发现您的解决方案会将表单复制到另一个不可见的表单，但背后是原始表单将被清除，因此无法对原始表单进行此类编辑（例如，在表单验证错误之后）。

为了解决这个问题，我尝试在将元素附加到不可见表单之前对其进行克隆。我像这样编辑了你的代码：

//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));
            }
        });

不幸的是，现在它不会复制选择元素中的选定值。

希望有人能帮我完善这个脚本

Answer 6

你可以这样做

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

这将在新窗口中提交给http://www.YourSite.com/