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()并将字符串附加到您的操作网址。

Answer 3

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

尝试重新考虑你的设计，我的意思是，你为什么要在一个页面上需要3个表格 ...这对我来说太过'form'了。

你可以做的其他事情：将jQuery UI对话框容器div放在一个表单中（这应该可以，我猜）并且只有其中的字段...

Answer 4

您可以将它们提交给隐藏的Iframe，这样您就可以保持对主页的控制。

您可以编写一个提交所有三种表单的JS函数。

Answer 5

您能解释一下以不同形式分离信息的意义，并将信息与JS结合起来吗？当Java Script被禁用时，你的公式不起作用？将所有内容整合在一起。如果只想评估表单的特殊数据字段，请在服务器端检查按下了提交按钮。

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

Answer 6

我使用以下代码在我的网站上提交两个表单的数据。

我们的想法是使用serialize获取多个表单数据并合并该数据并将其均衡为data函数的$.ajax参数。< / p>

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

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

6 个答案: