javascript jQuery - 通过单个请求提交多个表单，无需 Ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7057833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - submit multiple forms through single request, without Ajax
提问by rapt
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.
我有一个包含多个表单的页面。我正在尝试提交其中一个表单（比如表单 A）（不是通过 Ajax，因为我需要在处理提交后加载结果页面），但我需要另一个表单的内容（比如表单 B）与表单 A，即表单 A + B 的内容应该一起提交到相同的 URL，作为一个请求，正如我之前所说，而不是作为 Ajax 请求。
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).
提交应通过 POST 请求进行。此外，表单仅包含非文件上传的字段（即输入、选择、文本区域字段）。
I have seen suggestions here such as
我在这里看到了一些建议，例如
Posting/submitting multiple forms in jQuery
or
或者
Submitting two forms with a single button
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.
但请注意，这些与我的情况不符，因为表单是在不同的请求中提交的，和/或它们是通过 Ajax 提交的。
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?
我想通过（jQuery 的）serialize() 获取其中一个表单的内容，但是如何将该字符串附加到由 POST 提交的表单？
Or maybe you have other ideas how to accomplish this?
或者，也许您有其他想法如何实现这一目标？
SOLUTION:
解决方案：
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:
基于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();
}
采纳答案by Sheepy
Well, you have to copy the data from form2 to form1 before the submit. Here is the basic to get you started:
好吧，您必须在提交之前将数据从 form2 复制到 form1。以下是让您入门的基本知识：
$.each ( $('#form2 input, #form2 select, #form2 textarea').serializeArray(), function ( i, obj ) {
$('<input type="hidden">').prop( obj ).appendTo( $('#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.
此函数将从 form2 中选择输入，获取它们的当前值，然后为每个输入创建一个新的隐藏输入并将它们添加到 form1。
Depending on your scenario you may want to check the existance of input with same name on form1 first.
根据您的情况，您可能希望首先检查 form1 上是否存在同名输入。
回答by Julien Lafont
A solution to inject the data directly in the post request (and not in a sub field)
直接在 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>
回答by Stephen
You can only do one request at a time and that will reload the page unless you use AJAX. The only other option would be to create a script which concatantes the seralizations of your two forms - but at that point, why wouldn't you just use one large form..
您一次只能执行一个请求，除非您使用 AJAX，否则这将重新加载页面。唯一的另一种选择是创建一个脚本来连接您的两个表单的序列化 - 但在这一点上，您为什么不只使用一个大表单..
Edit: For your combining the two forms, there is an example of this in the answer of the second link you provided.
编辑：为了结合这两种形式，您提供的第二个链接的答案中有一个例子。
回答by Mihai Iorga
form A:
表格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>
form B:
表格B：
<form id="formb" method="post" action="#" onsubmit="return false;">
</form>
回答by Mike Saunders
I discovered that your solution will copy the form to another invissible form, but the backside is that the original forms will be cleared an such edit of the original form (eg after form validation errors) is not possible.
我发现您的解决方案会将表单复制到另一个不可见的表单，但背面是原始表单将被清除，因此无法对原始表单进行此类编辑（例如，在表单验证错误之后）。
To solve this i tried to clone the elements before appending it to the invissible form. I edited your code like this:
为了解决这个问题，我尝试在将元素附加到不可见表单之前克隆元素。我像这样编辑了你的代码：
//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));
}
});
Unfortunatly now it doesn't copy the selected values in a select element.
不幸的是，现在它不会复制选择元素中的选定值。
Hope someone can help me to impove this script
希望有人能帮我改进这个脚本
回答by kleinohad
you can do some thing like this
你可以做这样的事情
$('#SubmitBtn).click(function () {
$("#formId").attr("action", "http://www.YourSite.com/");
$("#formId").attr("method", "post");
$("#formId").attr("target","_blank");
$('#formId').submit();
});
this will submit the for to http://www.YourSite.com/in a new window
这将在新窗口中将 for 提交到http://www.YourSite.com/
