将多个表单提交到同一页面

Question

我在一个页面上有三个表单。它们每个都有多个输入，包括文件。我希望当我提交最后一个表单时，所有三个表单的输入都发送到操作位置的 POST 数据。如果需要，我可以使用 jQuery。

Answer 1

以下是您可以将多种表单合并为一个的方法。现在，一个警告：如果您有多个带有文件类型输入的表单，那么您遇到的问题真的很难解决。浏览器将不允许您使用 XMLHttpRequest（即任何形式的 Ajax）发布带有文件输入的多部分表单 POST。您也无法创建包含文件输入的新表单，因为您无法使用 Javascript 设置文件输入元素的值。因此，唯一可行的方法是，如果您有多个（3 个？无论如何）表单，并且其中只有一个具有文件输入。如果是这种情况，那么您可以做的是将其他 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();
}

我还没有测试过，但我已经多次做过类似的事情，而且我知道构建 <form> 元素可以正常工作，即使在 IE6 中也是如此。 （IE 有时会在表单字段方面出现一些奇怪的问题，但我认为这部分应该没问题。最坏的情况是，除了能够通过“appendTo”调用“移动”字段之外，您还必须复制名称和值并创建新的表单字段。）

Answer 2

您可能想尝试使用 serialize() 并将字符串附加到您的操作 URL。

Answer 3

您可以将它们提交到隐藏的 iframe，这样您就可以保持对主机页面的控制。

你可以编写一个 JS 函数来提交所有三个表单。

Answer 4

您现在唯一的选择是 jQuery AJAX 请求（或 XMLHTTP 请求，但不建议这样做）。

试着重新思考你的设计，我的意思是，为什么你需要在一个页面上显示 3 个表单...这对我来说已经太“形式化”了。

您可能还可以做一些其他事情：将 jQuery UI 对话框容器 div 放在一个表单中（我猜这应该可以），然后在其中包含字段...

Answer 5

我使用下面的代码在我的网站中提交了两个表单的数据。

这个想法是您使用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('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />');
            $("#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 !!');
        }
    }
}

Answer 6

你能解释一下把不同形式的信息分开，然后用JS把信息组合起来的意思吗？当 Java Script 被禁用时，您的公式不起作用？ 将所有内容放在一个表格中。如果您只想评估表单的特殊数据字段，请在服务器端检查按下了哪个提交按钮。

当你遇到问题需要 JS 来解决正常的通信问题时，你就有了概念问题。 JS 可以帮助您自定义并提供更好的 UI - 但这个问题是无用的。