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

I have three forms on a page. They each have multiple inputs including files. I would like so that when I submit the last form, the inputs for all three forms are sent to the POST data for the action location. I can jQuery if necessary.

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

6 个解决方案

#1

Here's how you could combine multiple forms into one. Now, a warning: if you have more than one form with file-type inputs, you've got a problem that's really hard to solve. The browser will not let you use XMLHttpRequest (ie Ajax, in any form) to post a multi-part form POST with file inputs. You also won't be able to create a new form with the file inputs in it, because you can't set the value of file input elements with Javascript. Thus, the only way this can work is if you have multiple (3? whatever) forms, and only ONE Of them has file inputs. If that's the case, then what you can do is pull all the (non-file) inputs from the other 2 forms into the other form, and then submit that one.

以下是将多个表单合并为一个表单的方法。现在，一个警告：如果你有多个带有文件类型输入的表单，你就会遇到一个很难解决的问题。浏览器不允许您使用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();
}

I haven't tested that, but I've done stuff like it many times and I know that building up a <form> element works fine, even in IE6. (IE has some weird issues with form fields sometimes, but I think this part should be OK. At worst, instead of just being able to "move" the fields with that "appendTo" call you'd have to copy out the names and values and make new form fields.)

我没有测试过，但是我已经做了很多次这样的事情，我知道构建一个

元素工作正常，即使在IE6中也是如此。 （IE有时会对表单字段有一些奇怪的问题，但我认为这部分应该没问题。最坏的情况是，不要只是通过“appendTo”调用来“移动”字段，你必须复制出名称和值并创建新的表单域。）

#2

You may want to try using serialize() and append the string to your action URL.

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

#3

You could submit them to hidden Iframes, that way you maintain control of the host page.

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

You can write one JS function that submits all three forms.

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

#4

Your only option right now is a jQuery AJAX request (or a XMLHTTP one, but that's not recommended).

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

Try rethinking your design, I mean, why do you need 3 forms on one page... that's too `formy' for me already.

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

There is something else you can probably do: put the jQuery UI dialog box container div inside one form (this should work, I guess) and just have the fields within it...

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

#5

I used below code to submit two forms' data in my website.

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

The idea is that you get the multiple forms data using serialize and combine that data and equalize that to data parameter of the $.ajax function.

我们的想法是使用序列化获取多个表单数据并将该数据组合并将其均衡为$ .ajax函数的数据参数。

.

。

// 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

Can you explain the sense of separating information in different forms and combine the information later with JS? And when Java Script is disabled your Formulas didn't work? Put all together in one form. If you want to evaluate only the special data Fields of your Form, check on the server side which submit button was pressed.

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

When you have a problem an you need JS to fix a normal communication problem, then you have a conceptional problem. JS can help you to customize and give a better UI - but this problem is useless.

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