jQuery Multiple Forms Submit

html, javascript, jquery, php

Solution

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

Problem

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?

Original source