Submitting multiple forms with one submit button that also passes post data

Question

I'm building a tool that has multiple forms. One form per tab, that also allows you to create new tabs, and thus new forms.

The way I built each tab is like this

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

qBox.php is a form all on it's own, with ids and classes that increment based on $globalIncrement. (the reason I do this is somewhat unrelated).

When the user hits the "submit" button, the form takes all the POST data, and with that we create the results.php page.

Problem is, when you submit, it only takes the POST data from the active tab, and not the POST data from the other tabs (which, again, contain different forms).

I tried to rectify this problem with the following code:

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

However, this only partially works. The form action is still performed, thus bringing me to results.php. However, now, none of the POST data is being retrieved.

How can I submit all these forms, while also passing through the POST data to the next page?

Thank you in advance!

EDIT:

Solved it myself. Rather than having a form on every tab, I simply wrapped every tab item inside of an all-encompassing form. Works great.

Thank you to all that answered.

Answer 1

Use this:

$(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

With jQuery, you can create one form that contains every input. Something like that :

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

Answer 3

Suppose you have 2 forms: #form1, #form2 and the main form #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');
    });
});

Note: you should also include Jquery Form Plugin

Answer 4

The problem of form submits being blank is likely because they are hidden because of the way the tabs is set up. I've seen this happen before on certain elements that had the parent div set to display:none and the browser thinking that it wasn't a valid form element since the user couldn't see it.

Try this

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

Answer 5

Solved it myself. Rather than having a form on every tab, I simply wrapped every tab item inside of an all-encompassing form. Works great.

Thank you to all that answered.