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

我有一个包含多种表格的页面。 我正在尝试提交其中一个表单(比如表单A)(不是通过Ajax,因为我需要在处理提交后加载结果页面),但是我需要另一个表单的内容(比如表单B)与TOGETHER一起提交表单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(); } 

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

 $.each ( $('#form2 input, #form2 select, #form2 textarea').serializeArray(), function ( i, obj ) { $('').prop( obj ).appendTo( $('#form1') ); } ); 

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

根据您的情况,您可能希望首先在form1上检查输入的存在。

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

 

您一次只能执行一个请求,除非您使用AJAX,否则将重新加载页面。 唯一的另一种选择是创建一个脚本来连接两个表单的seralizations – 但在那时,为什么你不能只使用一个大表单..

编辑:为了组合这两种forms,在您提供的第二个链接的答案中有一个例子。

表格A:

 

表格B:

 

我发现您的解决方案会将表单复制到另一个不可见的表单,但背面是原始表单将被清除,原始表单的编辑(例如,在表单validation错误之后)是不可能的。

为了解决这个问题,我尝试在将元素附加到不可见forms之前克隆元素。 我编辑了你的代码:

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

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

希望有人可以帮助我推动这个脚本

你可以做这样的事情

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

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