Question

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

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

    <div class="tabs_item">
        <h4>Tab01</h4>
        <?php $globalIncrement++; include 'qBox.php';  ?>
    </div>

qBox.php是一个全部在其上的表单，其中id和类基于$ globalIncrement递增。（我这样做的原因有点无关）。

当用户点击＆＃34;提交＆＃34;按钮，表单获取所有POST数据，然后我们创建results.php页面。

问题是，当你提交时，它只接受来自活动标签的POST数据，而不是来自其他标签的POST数据（同样，它包含不同的表格）。

我尝试使用以下代码纠正此问题：

$('#subBtn').click(function(){
$('form').each(function(){
    $(this).submit();
});
});

然而，这只是部分有效。表单操作仍然执行，从而将我带到results.php。但是，现在，正在检索POST数据的 none 。

如何提交所有这些表单，同时还将POST数据传递到下一页？

提前谢谢！

编辑：

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

感谢所有回答。

Answer 1

使用此：

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

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

Concept Verification

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 with submit button：

$('#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的某些元素上，并且浏览器认为它不是有效的表单元素，因为用户无法看到它。

试试这个

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

Answer 5

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

感谢所有回答。

使用一个也传递帖子数据的提交按钮提交多个表单

5 个答案: