使用一个提交按钮提交多个表单，该按钮还传递帖子数据

Question

我正在构建一个具有多种形式的工具。 每个选项卡一个表单，这也允许您创建新的选项卡，从而创建新的表单。

我建立每个标签的方式是这样的

    <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数据传递到下一页？

先感谢您！

编辑：

我自己解决了。 与其在每个选项卡上都没有表单，我只是将每个选项卡项都包裹在一个无所不包的表单中。 效果很好。

谢谢所有回答。

Answer 1

用这个：

$(function() {
    $('#subBtn').click(function(e){
        e.preventDefault();
        $('form').submit();
    });

    $('form').on('submit',function(e) {
        e.preventDefault();
        $.post( this.action, $(this).serialize() );
    });
});

概念验证

Answer 2

使用jQuery，您可以创建一个包含每个输入的表单。 像这样：

$('#subBtn').click(function(){
    $('<form>', {
        //All your attributes
        action : 'url',
        method : 'POST'
    })
    .append($('form').children().clone(true, true))[0].submit();
});

Answer 3

假设您有2种形式：＃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');
    });
});

注意：您还应该包括Jquery Form Plugin

Answer 4

表单提交为空白的问题很可能是由于选项卡的设置方式而将其隐藏。 我之前曾在某些将父div设置为display的元素上发生过这种情况：none，浏览器认为这不是有效的form元素，因为用户看不到它。

尝试这个

$('#subBtn').click(function(){
$('form').each(function(){
    $(this).parents('.tab selector').show();
    $(this).submit();
    $(this).parents('.tab selector').hide();
});
});

Answer 5

我自己解决了。 与其在每个选项卡上都没有表单，我只是将每个选项卡项都包裹在一个无所不包的表单中。 效果很好。

谢谢所有回答。