How to combine two javascript FormData objects

Question

I need to combine two FormData objects and post them using XMLHttpRequest. One of the forms contains file input.

var formData = new FormData(document.forms.namedItem('form-ship'));
var poData = new FormData(document.forms.namedItem('po-form'));

// Combine them
var fData = $.extend(true, formData, poData);

It doesn't work when I use $.extend or if I use serialize() to combine the form that doesn't have file input. Any idea how to do this?

Answer 1

You cannot couldn't. FormData is was unfortunately not enumerable.

However, as you say only one of your forms does contain a file input. Then it should be possible to use serializeArray on the other and append to the data manually:

var formData = new FormData(document.forms['form-ship']); // with the file input
var poData = jQuery(document.forms['po-form']).serializeArray();
for (var i=0; i<poData.length; i++)
    formData.append(poData[i].name, poData[i].value);

Answer 2

I did it this way:

let formData = new FormData($("#f_articulos")[0]);
let formDataPrecios = new FormData($("#f_listado_precios")[0]);
for (var pair of formDataPrecios.entries()) {
    formData.append(pair[0], pair[1]);
}

Answer 3

form_data_1 = new FormData(document.getElementById('form1')) form_data_2 = new FormData(document.getElementById('form2'))

  for (const pair of form_data_2.entries()) {
    form_data_1.append(pair[0], pair[1]);
  }



  for (const pair of form_data_1.entries()) {
    console.log(`${pair[0]}, ${pair[1]}`);
  }