使用一个提交按钮提交多个表单，该按钮也传递发布数据答案

【问题标题】：Submitting multiple forms with one submit button that also passes post data使用一个提交按钮提交多个表单，该按钮也传递发布数据
【发布时间】：2014-07-30 23:29:29
【问题描述】：

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

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

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

提前谢谢你！

编辑：

自己解决了。我没有在每个选项卡上都有一个表单，而是简单地将每个选项卡项包装在一个包罗万象的表单中。效果很好。

感谢所有回答的人。

【问题讨论】：

如果你想把所有数据放在一篇文章中，你只需要使用一个表单
尝试通过 ajax 提交数据，您将能够提交所有表单并且而不是导航到操作页面。
考虑到我的情况，我认为这是不可能的。除非以某种方式，我可以将所有表格链接在一起。也许如果他们都共享相同的 ID，他们都会被提交？还是那种性质的东西？
除非将所有内容合并到一个表单中，或者使用 JavaScript 发送包含所有数据的请求，否则您将一事无成。

标签： php jquery html forms

【解决方案1】：

使用 jQuery，您可以创建一个包含所有输入的表单。类似的东西：

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

【讨论】：

【解决方案2】：

假设您有 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

【讨论】：

【解决方案3】：

表单提交空白的问题可能是因为选项卡的设置方式将它们隐藏起来。我之前在某些将父 div 设置为 display:none 的元素上看到过这种情况，并且浏览器认为它不是有效的表单元素，因为用户看不到它。

试试这个

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

【讨论】：

【解决方案4】：

使用这个：

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

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

Concept Verification

【讨论】：

很高兴您解决了它。让您知道我创建了一个concept verification 演示并附在我的答案中。我不确定我知道为什么它对你不起作用。不过，我很高兴你有一个解决方案。

【解决方案5】：

自己解决了。我没有在每个选项卡上都有一个表单，而是简单地将每个选项卡项包装在一个包罗万象的表单中。效果很好。

感谢所有回答的人。

【讨论】：