javascriptjqueryjquery-uijquery-ui-dialog

How to combine two javascript FormData objects


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?


Solution

  • 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);