jQuery Multiple Forms Submit

Question

I have 4 forms on a page. I know that forms cannot be nested.

<form id="form1"></form>

<form id="form2"></form>

<form id="form3"></form>

<form id="form4"></form>

presented in that order.

Form 1 and Form 4 post to same php page for processing. Form 1 have 1 input field Form 4 have multiple fields, checkboxes and selects.

What is the best approach for both form 1 or form 4 sending the combined fields of both forms?

I've tried jQuery, works great for text input and checkbox, but can't get it to work with Select. Tried combining form 1 and form 4 and using css to repositioning form 1, but can't get the layout right.

Is there something simpler to do this?

Answer 1

It's not possible. You can either use serialize() or serializeArray() method for getting forms' data and post them to the server using Ajax:

Encode a set of form elements as a string for submission.

$('#send').click(function() {
   var firstFormData  = $('form:eq(0)').serializeArray();
   var fourthFormData = $('form:eq(3)').serializeArray();
   $.ajax({
        url  : '...',
        type : 'post',
        data : firstFormData.concat(fourthFormData)
   }).done(function() {
       // ...
   });
});

Answer 2

Okay, I could not get .serialize() to work with checkbox array from form4 eg

<input type="checkbox" id="model[]">

I tried to grab checked values but could not get them to serialize together with other input :

var vals = []
    $('input:checkbox[name="model[]"]').each(function() {
        if (this.checked) {
            vals.push(this.value);
        }
    });

So I went back and did the simpler thing :

Removed form1, move the text input and the submit button within a <div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div> inside form4.

Put a placeholder <div id="placeholder" style="position:relative;"></div> above form2 and 3 where form1 used to be.

Place a javascript above :

$(document).ready(function(){
    $("#searchbox")
    .appendTo("#placeholder");
});

to move the text input and submit button to position them absolute and relative to the placeholder div.

This way I reduced them to 1 form (which is what its intention anyways), does not rely on javascript to manipulate any data, and does not require me to do the tandem serialization on both forms.