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

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”调用“移动”字段之外，你还必须复制名称和值并创建新的表单字段。)