将多个表单提交到同一页面
我在页面上有三个表单。 它们每个都有多个输入，包括文件。 我希望当我提交最后一个表单时，所有三个表单的输入都会发送到操作位置的POST数据。 如果有必要，我可以jQuery。
以下是将多个表单合并为一个表单的方法。 现在，一个警告：如果你有多个带有文件类型输入的表单，你就会遇到一个很难解决的问题。 浏览器不允许您使用XMLHttpRequest（即任何forms的Ajax）发布带有文件输入的多部分表单POST。 您也无法使用文件输入创建新表单，因为您无法使用Javascript设置文件输入元素的值。 因此，唯一可行的方法是，如果您有多个（3？无论）forms，并且只有一个具有文件输入。 如果是这种情况，那么您可以做的是将其他2个表单中的所有（非文件）输入拉入另一个表单，然后提交该表单。
function whenFormsCollide() { // pass in one or more form elements var forms = $.makeArray(arguments); var hasFiles = 0, targetForm = null; $.each(forms, function(i, f) { if ($(f).find('input:file').length > 0) { ++hasFiles; targetForm = f; } }); if (hasFiles > 1) throw "More than one form has 'file' inputs"; targetForm = targetForm || forms[0]; $.each(forms, function(i, f) { if (f === targetForm) continue; $(f).find('input, select, textarea') .appendTo($(targetForm)); }); $(targetForm).submit(); } 我没有测试过，但是我已经做了很多次这样的事情，我知道构建一个
元素工作正常，即使在IE6中也是如此。 （IE有时会对表单字段有一些奇怪的问题，但我认为这部分应该没问题。最坏的情况是，不要只是通过“appendTo”调用来“移动”字段，你必须复制出名称和值并创建新的表单域。）
您可能想尝试使用serialize（）并将该字符串附加到您的操作URL。
您可以将它们提交给隐藏的Iframe，这样您就可以保持对主页的控制。
您可以编写一个提交所有三个表单的JS函数。
您现在唯一的选择是jQuery AJAX请求（或XMLHTTP请求，但不建议这样做）。
尝试重新考虑你的设计，我的意思是， 你为什么要在一个页面上需要3个表格 …这对我来说太“form”了。
你可以做一些其他事情：将jQuery UI对话框容器div放在一个表单中（这应该可以，我猜）并且只有其中的字段…
我使用下面的代码在我的网站上提交两个表单的数据。
我们的想法是使用serialize获取多个表单数据并将该数据组合并将其均衡为$.ajax函数的data参数。
。
// submits two forms simultaneously function submit_forms(form1_id, form2_id) { var frm1_name = $("#" + form1_id).attr('name'); var frm2_name = $("#" + form2_id).attr('name'); if (frm1_name == frm2_name) { alert('The two forms can not have the same name !!'); } else { var frm1_data = $("#" + form1_id).serialize(); var frm2_data = $("#" + form2_id).serialize(); if (frm1_data && frm2_data) { $("#div_busy").html('Processing...
'); $("#busy").fadeIn('slow'); $.ajax( { type: "POST", url: "process_sticker_request.php", data: frm1_data + "&" + frm2_data, cache: false, error: function() { $("#busy").hide('slow'); $("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'}); $("#div_busy").html('Request Error!!'); }, success: function(response) { $("#div_busy").hide('slow'); $("#hdnFormsData").html(response); // open popup now with retrieved data window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1'); document.getElementById("prt").action = 'win_sticker.php'; document.getElementById("prt").target = 'popup2'; document.getElementById("prt").submit(); // reset the action of the form document.getElementById("prt").action = 'list_preview.php'; } }); } else { alert('Could not submit the forms !!'); } } }
'); $("#busy").fadeIn('slow'); $.ajax( { type: "POST", url: "process_sticker_request.php", data: frm1_data + "&" + frm2_data, cache: false, error: function() { $("#busy").hide('slow'); $("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'}); $("#div_busy").html('Request Error!!'); }, success: function(response) { $("#div_busy").hide('slow'); $("#hdnFormsData").html(response); // open popup now with retrieved data window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1'); document.getElementById("prt").action = 'win_sticker.php'; document.getElementById("prt").target = 'popup2'; document.getElementById("prt").submit(); // reset the action of the form document.getElementById("prt").action = 'list_preview.php'; } }); } else { alert('Could not submit the forms !!'); } } }你能解释一下以不同forms分离信息的感觉，然后将这些信息与JS结合起来吗？ 当Java脚本被禁用时，您的公式不起作用？ 将所有内容整合在一起。 如果只想评估表单的特殊数据字段，请在服务器端检查按下了提交按钮。
当你遇到问题时，你需要JS来解决正常的通信问题，那么你就有了一个概念问题。 JS可以帮助您定制并提供更好的UI – 但这个问题毫无用处。