[英]jQuery - submit multiple forms through single request, without Ajax
我有一个页面有几种形式。 我正在尝试提交其中一个表单(比如表单A)(不是通过Ajax,因为我需要在处理提交后加载结果页面),但是我需要另一个表单的内容(比如表单B)一起提交表单A,即表单A + B的内容应作为一个请求一起提交给SAME URL,如前所述,不作为Ajax请求。
提交应该是POST请求。 此外,表单仅包含非文件上载的字段(即输入,选择,textarea字段)。
我在这里看到过诸如此类的建议
要么
但要注意这些与我的情况不符,因为表单是在不同的请求中提交的,和/或它们是通过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 ) {
$('<input type="hidden">').prop( obj ).appendTo( $('#form1') );
} );
此函数将从form2中选择输入,获取它们的当前值,然后为每个输入创建一个新的隐藏输入并将它们添加到form1。
根据您的方案,您可能希望首先检查form1上具有相同名称的输入的存在。
直接在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>
您一次只能执行一个请求,除非您使用AJAX,否则将重新加载页面。 唯一的另一种选择是创建一个脚本来连接两个表单的seralizations - 但那时,为什么你不能只使用一个大表单..
编辑:对于您组合这两种形式,在您提供的第二个链接的答案中有一个示例。
表格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>
我发现您的解决方案会将表单复制到另一个不可见的表单,但背面是原始表单将被清除,原始表单的编辑(例如,在表单验证错误之后)是不可能的。
为了解决这个问题,我尝试在将元素附加到不可见形式之前克隆元素。 我编辑了你的代码:
//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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.