jQuery - 通过单个请求提交多个表单，没有Ajax [英] jQuery - submit multiple forms through single request, without Ajax

问题描述

我有一个包含多种表单的页面。
我试图提交其中一个表格（比如表格A）（不是通过Ajax，因为我需要在处理提交后加载结果页面），但我需要另一个表格的内容（比如表格B）与表格A一起提交，即表格A + B的内容应作为一个请求一起提交给相同的URL，如前所述，不是作为Ajax请求。

I have a page with several forms. I am trying to submit one of the forms (say form A) (NOT through Ajax, since I need to load the result page after the submit is processed), BUT I need another form's contents (say form B) to be submitted TOGETHER with form A, i.e. the contents of forms A + B should be submitted TOGETHER to the SAME URL, as one request, and as I said before, NOT as an Ajax request.

提交应该是POST请求。此外，表单只包含非文件上传的字段（即输入，选择，textarea字段）。

The submit should be by a POST request. Also, the forms contain ONLY fields that are not file upload (i.e. input, select, textarea fields).

我在这里看到过建议，例如

I have seen suggestions here such as

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

或

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

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

but pay attention that these do not match my case, since the forms are submitted in different requests, and/or they are submitted through Ajax.

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

I was thinking of getting the contents of one of the forms by (the jQuery's) serialize(), but how do I attach that string to a form submitted by POST?

或者您可能有其他想法如何实现此目的？

Or maybe you have other ideas how to accomplish this?

解决方案：

基于Sheepy和YoTsumi，我写了以下代码。我也使用Pointy的答案从以下链接：

Based on the ideas of Sheepy and YoTsumi, I wrote the following code. I am also using the answer by Pointy from the following link:

将多个表单提交到同一页面

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

推荐答案

嗯，你必须复制提交前从form2到form1的数据。以下是开始使用的基础：

Well, you have to copy the data from form2 to form1 before the submit. Here is the basic to get you started:

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

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

This function would select inputs from form2, get their current values, then create a new hidden input for each of them and add them to form1.

根据您的情况，您可能需要首先检查form1上是否存在相同名称的输入。

Depending on your scenario you may want to check the existance of input with same name on form1 first.

这篇关于jQuery - 通过单个请求提交多个表单，没有Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！