我有一个包含多个表单的页面。 我正在尝试提交其中一个表单(比如表单 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的思想,我写了如下代码。我还使用了来自以下链接的 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();
}
最佳答案
那么,在提交之前,您必须将数据从 form2 复制到 form1。以下是让您入门的基础知识:
$.each ( $('#form2 input, #form2 select, #form2 textarea').serializeArray(), function ( i, obj ) {
$('<input type="hidden">').prop( obj ).appendTo( $('#form1') );
} );
此函数将从 form2 中选择输入,获取它们的当前值,然后为每个输入创建一个新的隐藏输入并将它们添加到 form1。
根据您的情况,您可能需要先检查 form1 上是否存在具有相同名称的输入。
关于javascript - jQuery - 通过单个请求提交多个表单,无需 Ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7057833/