我正在构建一个具有多个表单的工具。每个选项卡一个表单，这也允许您创建新的选项卡，从而创建新的表单。
我创建每个标签的方式是这样的
<div class="tabs_item">
<h4>Tab01</h4>
<?php $globalIncrement++; include 'qBox.php'; ?>
</div>
qBox.php是一个完全独立的表单，其id和类根据$globalIncrement递增。(我这样做的原因有些无关)。
当用户点击"提交"按钮时，表单接收所有POST数据，然后我们创建results.php页面。
问题是，当您提交时，它只接受来自活动选项卡的POST数据，而不接受来自其他选项卡的POST数据(同样，这些选项卡包含不同的表单)。
我试着用下面的代码来纠正这个问题:
$('#subBtn').click(function(){
$('form').each(function(){
$(this).submit();
});
});
然而，这只是部分工作。表单操作仍在执行，因此转到results.php。但是，现在没有任何 POST数据被检索。
我如何提交所有这些表单，同时也通过POST数据传递到下一页?
提前感谢!
编辑:自己解决的。我没有在每个选项卡上都有一个表单，而是简单地将每个选项卡项包装在一个包罗万象的表单中。伟大的工作。
谢谢大家的回答。
使用jQuery，您可以创建一个包含所有输入的表单。像这样:
$('#subBtn').click(function(){
$('<form>', {
//All your attributes
action : 'url',
method : 'POST'
})
.append($('form').children().clone(true, true))[0].submit();
});
假设你有两个表单:#form1， #form2和主表单#form0，并带有提交按钮:
$('#form0').on('submit', function(event) {
event.preventDefault();
var xhr1 = $('#form1').ajaxSubmit().data('jqxhr');
var xhr2 = $('#form2').ajaxSubmit().data('jqxhr');
$.when(xhr1, xhr2).then(function() {
$('#form0').submit();
}, function() {
alert('Error');
});
});
表单提交为空白的问题很可能是因为选项卡的设置方式隐藏了它们。我以前在某些元素上看到过这种情况，这些元素的父div设置为display:none，浏览器认为它不是一个有效的表单元素，因为用户看不到它。
试试这个
$('#subBtn').click(function(){
$('form').each(function(){
$(this).parents('.tab selector').show();
$(this).submit();
$(this).parents('.tab selector').hide();
});
});
使用
$(function() {
$('#subBtn').click(function(e){
e.preventDefault();
$('form').submit();
});
$('form').on('submit',function(e) {
e.preventDefault();
$.post( this.action, $(this).serialize() );
});
});
概念验证
我自己解决了。我没有在每个选项卡上都有一个表单，而是简单地将每个选项卡项包装在一个包罗万象的表单中。伟大的工作。
谢谢大家的回答。