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