CODEWITHSUNDEEP
phpjqueryhtmlforms
Felix
Felix

Reputation: 2661

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

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.

Upvotes: 0

Views: 1173

Answers (5)

PeterKA
PeterKA

Reputation: 24648

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

Upvotes: 1

Felix
Felix

Reputation: 2661

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.

Upvotes: 0

Zombiesplat
Zombiesplat

Reputation: 953

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();
});
});

Upvotes: 1

Olim Saidov
Olim Saidov

Reputation: 2844

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

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

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();
});

Upvotes: 1

Related Questions