在提交时合并两个表单中的值
我在一个html页面上有两种forms。 使用jQuery，当提交第一个数据时，是否可以将这两个表单中的数据放入POST数据中？
一种方法是在数据validation检查成功后，将form2的所有input复制到form1中。 这假定你没有做AJAX提交。
// new onsubmit function for form1 function form1_onsubmit() { if (!EntryCheck()) return false; $('#form2 :input').not(':submit').clone().hide().appendTo('#form1'); return true; } 如果您想要提交两次提交，可能是因为服务器提交失败，我们需要删除任何复制的input，然后复制到新的。
// new onsubmit function for form1 function form1_onsubmit() { $('#form1 :input[isacopy]').remove(); if (!EntryCheck()) return false; $('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1'); return true; }
jQuery的序列化支持多个表单元素，所以可以这样做：
$('#form1, #form2').serialize();
而对于你的情况，你可以这样做：
$('#form1').submit(function() { var action = $(this).attr('action'); if (!EntryCheck()) return false; $.ajax({ url : action, type : 'POST', data : $('#form1, #form2').serialize(), success : function() { window.location.replace(action); } }); return false; });
Lachlan罗氏的解决scheme只复制元素，但不包括值。 这也将照顾值，可以用来处理任何forms提交：
<script type="text/javascript"> var submitter = { combine: function (form1, form2) { $('#' + form1 + ' :input[isacopy]').remove(); $('#' + form2 + ' :input').not(':submit').not('textarea').not('select').each(function() { $(this).attr('value', $(this).val()); }); $('#' + form2 + ' textarea').each(function() { $(this).text($(this).val()); }); $('#' + form2 + ' select').each(function() { $('option[value!="' + $(this).val() + '"]', this).remove(); $('option[value="' + $(this).val() + '"]', this).attr('selected', 'selected'); }); $('#' + form2 + ' :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#' + form1); return true; } }; </script>
而你的表单标签看起来像（注意传递给函数的表单id被切换）：
<form name="my_first_form" id="my_first_form" method="post" onsubmit="if (!submitter.combine('my_first_form', 'my_second_form')) { return false; }"> ... <form name="my_second_form" id="my_second_form" method="post" onsubmit="if (!submitter.combine('my_second_form', 'my_first_form')) { return false; }">
表单validation可以放在任何你喜欢的地方 – 如果你的validation器是提交者对象的另一个函数，反之亦然，这是最有意义的。
虽然其他答案解决了您提出的问题，但如果您希望在用户提交表单时发送这两个表单的内容，则可能值得考虑为什么您有两个单独的表单。
如果您使用两种不同的forms将其视觉分离，则更好的方法是使用CSS将元素放置在屏幕上。 这样，你不是依靠JavaScript的存在，以确保您的表单正确填充。
我使用下面的代码在我的网站上提交两个表单的数据。
这个想法是，你使用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=".http://img.dovov.comprogress_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 !!'); } } }
这是干净的JavaScript方法合并两种forms。 我使用Prototype和jQuery在POST请求上testing它，它工作。 这是事情：
var data1 = document.getElementById（'form1'）。serialize（）;
注意：“form1”是表单ID，您需要将其设置在<form id =“form1”> </ form>
var data2 = document.getElementById（'form2'）。serialize（）;
注意：“form2”是表单id。您需要将其设置在<form id =“form2”> </ form>
现在你有两个variables和两个序列化的数据（数组）。 您可以轻松地合并它们。 你的表单将会有关联。 数组，当您尝试使用concat函数时，您可能会遇到问题。
var mergeddata = data1 +'＆'+ data2;
就是这个！ 您可以通过ajax调用轻松发送它们。 例如（Prototype.js）：
新的Ajax.Request（url，{method：'post'，参数：mergeddata，….
干杯，克里斯蒂安
另一种将自己的数据合并到表单序列化的方法
var data = {}; data['key'] = 'value'; e.preventDefault(); $.ajax({ url : url, dataType : 'json', type : 'post', data : $(this).serialize() + '&' + $.param(data), success : function(data) { }, error : function() { } });
使用serialize来组合表单并提交使用Ajax是为我工作，直到我添加一个“导出”button（以Excel文件发送数据）。 为此，我需要做一个完整的回发。 所以我结束了这个方法。 它select合适的合并技术，并沿用一些button，select和textareas一些问题：
$("body").on("submit", ".combineForm", function () { var frm = $(this); var action = frm.attr("action"); var method = frm.attr("method"); var target = frm.data("updateTarget"); var combined = $(".combineForm"); //get the submit button that was clicked var btn = $(this).find("button[type=submit]:focus"); var btnName = btn.attr("name"); var btnValue = btn.attr("value"); //create an in memory form to avoid changing the existing form var f = $("<form action='" + action + "' method='" + method + "'/>") //Browsers send the name and value of the clicked button but serialize, clone and our copy can't //So add a hidden field to simulate browser behaviour if (btnName) f.append("<input name='" + btnName + "' type='hidden' value='" + btnValue + "' />") if (btnValue === "export") {//exporting to a file needs full submit //merge forms with class 'combineForm' by copying values into hidden inputs // - cloning doesn't copy values of select or textareas combined.find(":input").not("submit").each(function () { var inp = $("<input name='" + $(this).attr("name") + "' type='hidden' value='" + $(this).val() + "' />") f.append(inp); }); f[0].submit(); return false; } //merge forms for ajax submit var data = combined.serialize() + "&" + f.serialize(); $.ajax({ url: action, type: 'POST', data: data, dataType: "html", success: function (html) { $(target).html(html); } }); return false; });
