Send mutiple form data via javascript (or jquery)

Question

I have these forms:

var formData = new FormData($('#form')[0]);
var formTRData = new FormData($('#form_tr')[0]);
var formTLData = new FormData($('#form_tl')[0]);
var formBRData = new FormData($('#form_br')[0]);
var formBLData = new FormData($('#form_bl')[0]);

And I send:

$.ajax({
url: 'aaaaa.php',
type: 'POST',
data: ????

How I can send all forms in data?

`data: [formData, formTRData, formTLData, formBRData, formBLData]`, then make sure `aaaaa.php` can handle data in that format. — Jack Bashford, Feb 19 '19 at 09:14
When I received the data in php and I do var_dump($_POST) is empty. — Ariel Web, Feb 19 '19 at 09:16
Possible duplicate of [Uploading multiple files using formData()](https://stackoverflow.com/questions/12989442/uploading-multiple-files-using-formdata) — kemicofa ghost, Feb 19 '19 at 09:39
@kemicofa, in this post the user add keys to the form, I need to send multiple forms — Ariel Web, Feb 19 '19 at 09:43

score 0 · Answer 1 · answered Feb 19 '19 at 09:25

0

You pass the data alomng like this data: {name: 'Wayne', age: 27, country: 'Ireland'}, As you can see first comes the identifier of the parameter then a colon and the the actual data.

In your aaaaa,php then you can access the parameters via

    $name = $_POST['name'];
    $age = $_POST['age'];
    $country = $_POST['country'];

This should help

answered Feb 19 '19 at 09:25

nbk

45,398
8
30
47

Thanks, but the forms are dinamycs and I doesn't know the parameters. – Ariel Web Feb 19 '19 at 09:27

score 0 · Answer 2 · answered Feb 19 '19 at 09:27

Create an object containing all of these like this:

var data = {
    "formData": new FormData($('#form')[0]);
    "formTRData": new FormData($('#form_tr')[0]);
    "formTLData": new FormData($('#form_tl')[0]);
    "formBRData": new FormData($('#form_br')[0]);
    "formBLData": new FormData($('#form_bl')[0]);
}

Make sure your server-side is prepared to receive a complex object and parse it correctly.

score 0 · Answer 3 · answered Feb 19 '19 at 09:30

You can combine the objects using $.param():

var postData = $.param(formData) + '&' + $.param(formTRData) + '&' + $.param(formTRData) + '&' + $.param(formTLData) + '&' + $.param(formBRData) + '&' + $.param(formBLData);

$.ajax({
url: 'aaaaa.php',
type: 'POST',
data: postData

score 0 · Answer 4 · answered Feb 19 '19 at 10:08

var formData = new FormData($('#form')[0]);
var formTRData = new FormData($('#form_tr')[0]);
var formTLData = new FormData($('#form_tl')[0]);
var formBRData = new FormData($('#form_br')[0]);
var formBLData = new FormData($('#form_bl')[0]); 
  
var formDataEntries = formData.entries();
var formTRDataEntries = formTRData.entries();
var formTLDataEntries = formTLData.entries();
var formBRDataEntries = formBRData.entries();
var formBLDataEntries = formBLData.entries();

var data = [...formDataEntries, ...formTRDataEntries, ...formTLDataEntries, ...formBRDataEntries, ...formBLDataEntries];

You can use spread operator for formData iterator.

score 0 · Answer 5 · answered Feb 19 '19 at 10:26

The solution was:

            var formData = new FormData($('#form')[0]);

        $.each($('#form_tr')[0], function(i, e) {
          formData.append(e.name, e.value);
        });
        $.each($('#form_tl')[0], function(i, e) {
          formData.append(e.name, e.value);
        });
        $.each($('#form_br')[0], function(i, e) {
          formData.append(e.name, e.value);
        });
        $.each($('#form_bl')[0], function(i, e) {
          formData.append(e.name, e.value);
        });

Send mutiple form data via javascript (or jquery)

5 Answers5